内容简介：而它比较难理解的地方是参数表达式中
:nth-child(n)
选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“ 批量选择操作
”。
而它比较难理解的地方是参数表达式中 n
的含义，以及如何进行数学运算，这也是面试中考察的难点。
nth-child介绍
:nth-child(n)
选择器匹配属于其父元素的第 n 个子元素。
使用它的时候需要注意几点：
- 第n个子元素的 计数是从1开始 ，不是从0开始的
-
选择表达式中的
字母
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
选择器，那么下面这段代码的样式是什么呢？
<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
是黑色的， 2
和 3
都是红色的。
因为 <span>2</span>
是其父节点的第2个（偶数）子元素。 <span>3</span>
是其父节点的第2个子元素，第一个是 <div></div>
。
所以辨别是否匹配的关键是：找到父元素，然后再计算在父元素中的位置。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 你了解HTTPS，但你可能不了解X.509
- 你真的了解Mybatis的${}和#{}吗？是否了解应用场景？
- 你所了解的 array_diff_uassoc 真的是你了解的那样吗？
- 图文了解 Kubernetes
- 深入了解 JSONP
- 一文了解 Kubernetes
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
