:nth-child(n)匹配父元素下第n个子元素且类型符合，不跳过非目标兄弟；:nth-of-type仅按标签名计数；CSS无原生“第n个某class”选择器，需用data属性、JS或结构优化实现。
nth-child 选中的是父元素下的第 n 个子元素，不是“某类的第 n 个”
很多人写 div:nth-child(2) 是想选中第二个 div，但实际它匹配的是“父元素下第 2 个子元素，且该子元素是 div”。如果第 2 个子元素是 p，那这个选择器就什么也不选中。
常见错误现象：
.item:nth-child(3) { color: red; }结果没生效——因为父容器的第 3 个子节点可能是文本节点、注释，或者一个 span，根本不是 .item。
- 它按 DOM 树中的位置序号计算，和元素类型是否符合无关（只在序号对得上时再校验类型）
- 浏览器不会跳过非目标类型的兄弟节点去数“第几个 .item”
- 若要真正按同类元素计数，得用
:nth-of-type（仅适用于有标签名的场景）或 JavaScript 补位
想选“第 n 个 .class”，用 :nth-of-type 不行，得换思路
:nth-of-type 只认 HTML 标签名（如 div、p），不认 class。所以 .btn:nth-of-type(2) 和 .btn:nth-of-type(1) 都无效——除非你所有 .btn 恰好都是同一标签，比如全是 button，那可以写 button.btn:nth-of-type(2)。
但更常见的情况是混合标签：
<span class="tag">A</span><br><em class="tag">B</em><br><strong class="tag">C</strong>这时
.tag:nth-of-type(2) 匹配不到 <em>，因为 <em> 是它所在父级的第 1 个 em，不是第 2 个。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 无原生 “第 n 个带某 class 的元素” 选择器
- CSS Selectors Level 4 提案中的
:nth-child(An+B of S)语法（如:nth-child(2 of .item)）目前仅 Safari 15.4+ 和 Chrome 120+（需 flag）支持，无法全平台使用 - 生产环境稳妥方案：加唯一 data 属性，或用 JS 动态标记
实际可落地的三种做法
面对“只给第三个 .card 加边框”这种需求，推荐按兼容性从高到低排序：
- 手动加
data-index：<div class="card" data-index="1"></div><br><div class="card" data-index="2"></div><br><div class="card" data-index="3"></div>
然后写[data-index="3"] { border: 1px solid #ccc; } - 用 JS 批量标记（适合动态列表）：
document.querySelectorAll('.card').forEach((el, i) => {<br> el.dataset.nth = i + 1;<br>});再用.card[data-nth="3"] - 如果结构固定且能改 HTML，用嵌套分组替代：把每 3 个包进一个
.group，再用.group:nth-child(n) .card:last-child等组合定位
Chrome/Firefox 调试时怎么快速验证 nth-child 是否生效
打开开发者工具 → Elements 面板 → 点击目标元素 → 在 Styles 面板里看对应规则是否被划掉（strikethrough）。如果被划掉，说明选择器没命中；如果没划掉但样式没体现，检查是否被更高优先级规则覆盖。
快速验证技巧：
- 临时把
nth-child改成nth-child(1)，看第一个子元素是否响应——能则说明语法没问题，问题出在序号逻辑 - 右键元素 → “Edit as HTML”，删掉前面几个兄弟节点，再看样式是否出现——能则确认是序号依赖上下文
- 用控制台执行
$$('.target-class')看 NodeList 顺序，再对照 DOM 树数真实位置
最常被忽略的一点：伪类选择器对文本节点、注释节点完全透明，但它们会计入 :nth-child 的序号。哪怕只是两行 HTML 之间多了一个换行，也可能让序号偏移 1。
