在CSS选择器里，nth-child与nth-of-type都能根据元素位置选子元素，但计算逻辑不同。nth-child以父元素下所有子节点为计数池，nth-of-type只统计同标签名的兄弟。将二者结合，能先限定类型再限定排位，做到精准选择。
基本区别回顾
先理解单独使用时的行为，才能明白结合的意义。
- nth-child(n)：选中父元素下第n个子元素，且这个子元素必须是指定类型，否则不选。
- nth-of-type(n)：在父元素下同类型标签里排第n个，忽略其他类型节点。
为什么需要结合
假设一个容器里混有标题、段落和图片，只想选第三个出现的图片，用单独选择器容易误伤。结合写法可表达为：既是图片，又在全部子元素中排某位，或同类型排某位且整体排某位。
常见组合写法
用空格或连写无法真正同时约束，需要用复合选择器把两个伪类接在同一个元素上。
/* 选中父元素下第4个子元素，且它必须是p标签 */
p:nth-child(4) {
color: red;
}
/* 选中父元素下第2个p标签 */
p:nth-of-type(2) {
font-weight: bold;
}
/* 结合：选中第3个子元素，并且它是同类型中的第1个p */
p:nth-child(3):nth-of-type(1) {
background: #f0f0f0;
}
实际结构示例
下面这段HTML中，我们验证结合选择器的效果。
<div class="box"> <h3>标题</h3> <p>第一段</p> <p>第二段，它是第3个子元素且是第2个p</p> <span>说明</span> <p>第三段</p> </div>
对应CSS，若写p:nth-child(3):nth-of-type(2)，则选中上述第二段文字，因为它整体排第3且是p类型里排第2。
用表对照
| 选择器 | 命中说明 |
|---|---|
| p:nth-child(2) | 第2个子元素且为p，此处是第一段 |
| p:nth-of-type(2) | p里排第2，此处是第二段 |
| p:nth-child(3):nth-of-type(2) | 同时满足，精准命中第二段 |
避坑提醒
伪类连写是“与”的关系，浏览器会同时校验两个条件，顺序不影响结果。
若容器前有空白文本节点，在部分旧环境会影响nth-child计数，建议用nth-of-type优先按类型筛选，再补nth-child约束整体位置，这样更稳健。
CSSnth-childnth-of-type修改时间：2026-07-31 06:33:17