网络日志

结构伪类选择器

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

先来段 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 也可以是公式,常用公式如下:

公式说明
2n偶数
2n+1奇数
5n5 10 15 20 ...
n+5从第5个元素开始到最后(包含第5个)
-n+5前5个元素(包含第5个)

如果 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 个孩子。