伪类

https://www.w3school.com.cn/css/css_pseudo_classes.asp

:last-of-type

指定父元素的最后一个某一元素

<!-- 测试伪类 -->
    <div class="pseudo-class">
      <p>第一</p>
      <p>第二</p>
      <p>第三</p>
      <!-- *第四个不是p标签* -->
      <span>第四</span>
    </div>

.pseudo-class p:last-of-type {
    color: red;
}

• 指定父元素的最后一个 p 元素的字体色：

image.png

:not(:last-of-type)

:not() 选择每个非某一元素的元素
:not(:last-of-type) 指定父元素的 除了最后一个某一元素的元素

.pseudo-class p:not(:last-of-type) {
    color: red;
}

• 指定父元素的 除了 最后一个 p 元素的字体色：
  image.png

:last-child

.pseudo-class p:last-child {
  color: red;
}

• 指定属于其父元素的最后一个子元素的 p 元素的字体色
• :last-child和 :last-of-type有区别，:last-child是最后一个子元素中的p标签，此时最后一个元素是span标签，没有p标签，所以没有变色
  image.png

:nth-child(n)

<div class="pseudo-class-two">
    <span>span</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

.pseudo-class-two p:nth-child(2n) {
  color: red;
}

• 第一个子元素的下标是 1

• 此时选取的是2的倍数的p标签字体颜色为红色，但是结果并不是，这是因为*p标签位置是在父元素中所有子元素的位置，而不是p标签在父元素中所有p标签的位置。

  
  image.png

:not(:nth-child(2n))

除了2的倍数的元素其他元素

<div class="content">
    <div class="content-item">hszz1</div>
    <div class="content-item">hszz2</div>
    <div class="content-item">hszz3</div>
    <div class="content-item">hszz4</div>
    <div class="content-item">hszz5</div>
    <div class="content-item">hszz6</div>
</div>

.content {
    .content-item:not(:nth-child(2n)){
        height:50px;
        width: 50px;
        background: pink;
    }
}

image.png