格式：[element]:nth-child(index)
示例：p:nth-child(3)
说明：
- 首先找 [element] 对应的标签，这里是 p 标签
- 找 p 标签的父标签是个 div 标签
- index = 3，那么就找 div 标签的第三个子标签，这里是
<p>第二个 p 标签</p>
image.png
这里把选择器修改成 p:nth-child(2) 发现左边没有字体是红色的。
按照上面的规则再分析一遍：
- 首先找 [element] 对应的标签，这里是 p 标签
- 找 p 标签的父标签是个 div 标签
- index = 2，那么就找 div 标签的第二个子标签，这里是
<span>第一个 span 标签</span>，这个标签的标签名称是 span 与 p 并不相符，所以选择器返回的是 null，不会应用样式。
image.png
要验证选择器是否找到目标，可以在控制台中通过 querySelector() 去验证。
image.png
如下代码，预测一下页面上是怎样的表现？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div>
<p>第一个 p 标签</p>
<p>
<p>第二个 p 标签</p>
</p>
<span>第一个 span 标签</span>
<p>第三个 p 标签</p>
<span>第二个 span 标签</span>
<span>第三个 span 标签</span>
</div>
</body>
</html>
只看上面的源码结合 :nth-child 的规则，猜测应该是第二个 p 标签会变红色，但实际没有这样。
原因：数第几个不能按照源代码来看，在浏览器的 Elements 选项里是实际运行的 html 代码，可以看到 p 标签嵌套 p 标签时，嵌套 p 标签被拆分了（下图红色方框），此时数第二个 p 标签是个没有内容的标签，点击第二个 p 标签是可以看到有对应样式的（下图蓝色方框）。
image.png
2023 年 css 为 :nth-child 又提供了一个新的语法 :nth-child(An+B [of S])，我们看一下它用来解决什么问题。
写一个表格，通过 tr:nth-child(even) 实现斑马纹（让表格中的每一行都交替显示颜色）。
image.png
业务需求中可能会对表格数据进行过滤，通过添加 hidden 属性隐藏过滤掉的行。
此时斑马纹效果失效了，原因是隐藏的标签 (hidden) 也参与了 :nth-child(An+B) 的计算。
image.png
修改选择器为 tr:nth-child(even of :not([hidden])) 可以看到斑马纹又出现了。
image.png
tr:nth-child(even of :not([hidden]))说明：
- 首先找 [element] 对应的标签，这里是 tr 标签
- 找 tr 标签的父标签是个 tbody 标签
-
even of :not([hidden])可以拆分两部走，然后先应用后面的，再应用前面的
a.of :not([hidden])tbody 下面的子标签先过滤出来不包含 hidden 属性的标签。找到第三个，第五个，第六个 tr 标签
b.eventbody 下面的子标签找第偶数个的标签。从第三个，第五个，第六个 tr 标签中找第偶数个，也就是第五个 tr 标签，应用样式。
网友评论