结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器选择里面的子元素。

先来段 html 例子

<section>
  <h2>最美四季</h2>
  <div>春</div>
  <div>夏</div>
  <div>秋</div>
  <div>冬</div>
</section>

1、first-child

用于匹配父元素中的第一个子元素（最美四季）

section:first-child {
  color: red;    
}

2、last-child

用于匹配父元素中的最后一个子元素（冬）

section:last-child {
  color: red;
}

3、nth-child(n)

可以选择父元素中一个或多个特定的子元素

n 可以是数字，意思是选择第 n 个元素，n 从 1 开始。

/* 匹配第 3 个子元素 —— 夏 */
section:nth-child(3) {
  color: red;
}

n 可以是关键字，even 是偶数， odd 是奇数

/* 匹配序号为偶数子元素 —— 也就是第二个“春”和第四个“秋” */
section:nth-child(even) {
  color: red;
}

n 也可以是公式，常用公式如下：

如果 n 是公式，则 n 从 0 开始计算，但是第 0 个元素或者超出了元素个数的会被忽略。

4、first-of-type

用于匹配父元素中指定类型的第一个

section div:first-of-type {
  color: red;    
}

此时匹配的元素是 —— 春！

5、last-of-type

用于匹配父元素中指定类型的最后一个 —— 冬

section div:last-of-type {
  color: red;    
}

6、nth-of-type(n)

用于匹配父元素中指定类型的一个或多个，n 的取值和 nth-child 一样。

那它和前面的 nth-child 有什么区别呢？ 试一试这个

section div:nth-of-type(3) {
  color: red;
}

我们发现匹配的结果变成了 —— “秋”！结果不一样了，是因为增加了 div 的元素选择器吗？

那我可以这样写吗？

section div:nth-child(3) {
  color: red;
}

试一下就会发现，匹配到的依旧是“夏”。为什么呢？

因为 nth-child 会把所有的盒子都排列序号，执行的时候先看 :nth-child(3) 之后再回去看前面的 div。

如果再试试下面这个，就更清楚了。

section div:nth-child(1) {
  color: red;
}

是不是所有文字都没变红？就是因为 :nth-child(1) 选出的盒子是“最美四季”，而之后发现需要匹配的是 div 元素，h2 与 div 不匹配，所以最后没有选中任何元素。

总结：1、nth-child 对父元素里面所有孩子排序选择，先找到第 n 个孩子，然后再看是否匹配；2、nth-of-type 对父元素里面指定的子元素进行排序选择，先找到匹配类型的子元素排序，然后再找第 n 个孩子。