一文搞懂 nth-child

格式：[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. even tbody 下面的子标签找第偶数个的标签。从第三个，第五个，第六个 tr 标签中找第偶数个，也就是第五个 tr 标签，应用样式。

最后编辑于：2023.12.16 10:47:49