2019-03-19 | 前端面试手记 | UNLOCK

你了解css3的nth-child吗

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,借助这个特性,可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。
而它比较难理解的地方是参数表达式中n的含义,以及如何进行数学运算,这也是面试中考察的难点。

nth-child介绍

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。

使用它的时候需要注意几点:

  1. 第n个子元素的计数是从1开始,不是从0开始的
  2. 选择表达式中的字母n代表≥0的整数

常见用法

它有3种常见用法:

  • 直接指明n的值:span:nth-child(1)
  • even/odd分别代表偶数 / 奇数:span:nth-child(even)
  • 借助n自定义选择范围:
    • nth-child(2n)/nth-child(2n + 1):偶数 / 奇数
    • nth-child(n + 3):第3个开始到最后

进阶用法

上面的用法中的第三部分,一般都是使用n,而有时候也会用到-n,比如选取前2个元素就是:nth-child(-n + 2)

为什么是这样呢?其实运算:-n + 2 ≥ 0,就可以推出n ≤ 2

由此,结合两者自动取交集,我们就可以限制选择某一范围。比如选择第6个到第9个,就是::nth-child(-n+9):nth-child(n+6)

注意:不是nth-child(2 - n)-n要写在一起!

真正理解“子元素”的含义

还是nth-child选择器,那么下面这段代码的样式是什么呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
span:nth-child(2n) {
color: red;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
</div>
<span>3</span>
</body>
</html>

答案是:1是黑色的,23都是红色的。

因为<span>2</span>是其父节点的第2个(偶数)子元素。<span>3</span>是其父节点的第2个子元素,第一个是<div></div>

所以辨别是否匹配的关键是:找到父元素,然后再计算在父元素中的位置。

请针对 Disqus 开启代理