:nth-child 失效是因为它要求元素既是第n个子元素又匹配标签名，若该位置被其他标签占据则不匹配；应改用 :nth-of-type 按同类型元素独立计数。
什么时候用 :nth-child 会失效
当你写的样式没生效，但结构看起来“明明第2个就是 p”，大概率是 :nth-child 在找“第n个子元素”，而那个位置被别的标签占了。比如父容器里有 div、span、p 混排，p:nth-child(2) 只会命中“恰好是第2个且是 p”的元素——如果第2个是 div，那这条规则就完全不匹配。
常见错误现象：p:nth-child(2) 没变色，但你数着 DOM 树确认“第二个 p 就在那儿”。这时候别怀疑浏览器，先检查它前面有没有其他兄弟节点。
- 必须同时满足两个条件：位置是第n个 + 类型匹配选择器前缀（如
p） - 索引从1开始，不是0
- 空格、换行、注释不算子元素，但所有 HTML 标签（
div、span、br等）都算
什么时候该切到 :nth-of-type
你要选的是“第几个同类型元素”，而不是“第几个子元素”，就该用 :nth-of-type。它先按标签名分组，再在组内计数。比如父元素下有3个 p、2个 blockquote、1个 img，那么 p:nth-of-type(2) 一定选中第二个 p，不管它在整个子元素列表里排第几。
典型使用场景：混合内容区域（如文章正文）里统一控制段落样式、列表中只对特定标签做隔行处理、组件库中避免因 wrapper 元素插入导致样式断裂。
-
:nth-of-type(2)不关心前面有没有h2或figure，只认p的序号 - 不加标签前缀时（如
:nth-of-type(2)），会分别对每种标签类型各取第2个，可能命中多个元素 - IE8 及更早版本不支持，但现代项目基本可忽略
odd 和 even 在两者中的行为差异
:nth-child(odd) 和 :nth-of-type(odd) 都能实现隔行效果，但结果可能完全不同。前者按所有子元素位置奇偶分组，后者只看同类型元素的奇偶序号。
例如父元素下结构为：<p>A</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<div>B</div>
<p>C</p>
<div>D</div>
<p>E</p>：
-
p:nth-child(odd)匹配 A（第1个）、E（第5个），因为只有它们在整体位置上是奇数 -
p:nth-of-type(odd)匹配 A（第1个p）、C（第2个？不，是第2个p是偶数）、E（第3个p→ 奇数），所以命中 A 和 E
注意：这里 p:nth-of-type(odd) 和 p:nth-child(odd) 碰巧结果一样，但只要中间插入一个 p，比如变成 p, div, p, p, div, p，差异立刻暴露。
公式写法 an+b 的实际影响
an+b 对两者意义一致，但基数不同：:nth-child(3n+1) 从所有子元素中每3个取第1个；:nth-of-type(3n+1) 是从所有 p 中每3个取第1个。
性能上无差别，但可维护性差在隐式依赖结构。比如 :nth-of-type(3n) 本意是“每3个 p 标红”，但如果某处删掉一个 p，后面所有序号平移，视觉节奏就乱了。这种逻辑更适合用 JS 动态加 class 控制。
-
3n+0等价于3n，表示3的倍数位置（第3、6、9…个） -
2n+1等价于odd，2n等价于even - 负数如
-n+3表示前3个，但可读性差，建议用:first-of-type、:nth-of-type(-n+3)等组合替代
真正容易被忽略的点是：这两个选择器都不管元素是否渲染（display: none 或 visibility: hidden 不影响计数），也不跳过伪元素或文本节点——它们只看真实存在的 DOM 子节点。如果你依赖视觉顺序做样式，得先确认 DOM 结构是否和预期一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
