CSS3结构化伪类

CSS2中就有第一项的选择符

div:first-child {
  /* 样式 */
}

CSS3又增加了一个可以选择最后一项的选择符：

div:last-child {
  /* 样式 */
}

还有专门针对只有一项的选择符:only-child和唯一一个当前标签的选择符:only-of-type。

下面出于记一下对nth的理解。
CSS3中提供了一下基于nth的规则：

• nth-child(n)
• nth-last-child(n)
• nth-of-type(n)
• nth-last-of-type(n)

假设有10个span，并且有默认样式

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

span {
  height: 2rem;
  width: 2rem;
  background-color: blue;
  display: inline-block;
}

效果是这样的

在线练习传送门1也能看到结果。

• nth-child(n)：
  1. 传入奇偶
     可以传入 odd 和 even并添加样式

    span:nth-child(odd) {
      background-color: #f90;
      border-radius: 50%;
    }

:nth-child(odd)

2. 传入整数
   :nth-child(2)就会选择第二项改变样式

:nth-child(2)

3. 传入数值表达式
   :nth-child(2n+3)会出现如下样式

:nth-child(2n+3)

由于n是从0增长的正整数，而且CSS的计数规则是从1（而不是0）开始的，所以当n=0时，第3个方块改变样式。

:nth-child(-2n+3)会出现如下样式

:nth-child(-2n+3)
这个-会根据计算结果，从DOM第一个元素为起始点开始计算，样式的改变是依次向上的方向。

nth-child和nth-last-child的区别在于，nth-last-child是从DOM的另外一头开始。比如:nth-last-child(-n+3)，就是从倒数第三个开始向后选择所有项。在浏览器中的结果如下：

:nth-last-child(-n+3)

• nth-of-type(n)
  与nth-child(n)使用方法基本一样的，两者的区别是加在样式的对象上，nth-child(n)选择符选择的是同级DOM中的子元素，与类无关，而:nth-of-type和:nth-last-of-type就要区分类型了。

  <span class="span-class"></span>
  <span class="span-class"></span>
  <span class="span-class"></span>
  <span class="span-class"></span>
  <span class="span-class"></span>

  <div class="span-class"></div>
  <div class="span-class"></div>
  <div class="span-class"></div>
  <div class="span-class"></div>
  <div class="span-class"></div>

.span-class:nth-of-type(odd) {
  background-color: #f90;
  border-radius: 50%;
}

在线练习传送门2

.span-class:nth-of-type(odd)

这样区别就明显了