:nth-child(odd)和:nth-child(even)不生效是因为按物理位置计数，非同类元素干扰会导致匹配错位；应优先用:nth-of-type或结构优化、class标记、js辅助等方案替代。
nth-child(odd) 和 nth-child(even) 为什么有时不生效
因为 :nth-child() 是按元素在父容器中的**物理位置**计数，不是按 CSS 选择器匹配到的“可见”或“同类”元素。比如父元素里混着 <div>、<code><p></p>、<span></span>，哪怕你只对 div 写样式，div:nth-child(odd) 仍会检查它是不是父元素下第 1、3、5…个子节点——中间夹了个 p 就可能直接跳过。
常见错误现象：div:nth-child(odd) 只给第一行变色，后面全没反应；或者奇偶错位，明明是第 2 个 div 却被当成 even。
- 确保目标元素在父级中连续、无干扰兄弟节点（最稳妥）
- 若无法控制 HTML 结构，改用
:nth-of-type(odd)—— 它只统计同类型标签（如所有div），忽略p、span等 - 注意：IE8 不支持
:nth-child和:nth-of-type，需降级用 class 手动标记
nth-child(even) 在表格中隔行变色的实际写法
表格场景下，tr:nth-child(even) 是最常用也最可靠的写法，前提是 tr 都在同一个 tbody 下（不要把 thead 或 tfoot 的 tr 混进来）。
使用场景：后台列表页、数据报表、管理后台表格等需要视觉区隔的场合。
立即学习“前端免费学习笔记（深入）”；
-
tbody tr:nth-child(even) { background: #f9f9f9; }—— 推荐加tbody前缀，避免误选thead tr - 如果表格有
colgroup或注释节点，它们不算子元素，不影响计数 - 注意：某些框架（如 Vue）动态插入
tr时，若用v-if控制显隐，会改变 DOM 顺序，导致奇偶错乱；此时建议用v-show或改用:nth-of-type
性能和兼容性：:nth-child() 在现代浏览器里真没问题吗
没问题，但有边界。
:nth-child() 是 CSS Level 3 标准，Chrome 2+、Firefox 3.5+、Safari 3.1+、Edge 12+ 全都支持。真正要注意的是「复杂表达式」带来的渲染开销和可读性问题。
- 简单写法如
:nth-child(odd)、:nth-child(2n)几乎无性能损耗 - 避免写
:nth-child(3n+7)这类带大偏移量的表达式——浏览器需遍历所有子元素计算，DOM 超过千级时可能卡顿 - 移动端 iOS Safari 对超长选择器链（如
article > section > ul > li:nth-child(odd)）偶有解析延迟，建议压平层级
替代方案：当 :nth-child 失效又不能改 HTML 时怎么办
别硬扛，换思路。
核心原则：CSS 优先靠结构，结构不可控就让 JS 或模板层辅助打标。
- 后端/模板层加 class：如
<tr class="row-odd">，再写 <code>.row-odd { ... } - JS 动态补 class：
document.querySelectorAll('tr').forEach((tr, i) => tr.classList.toggle('even', i % 2 === 0)); - CSS-in-JS 或组件库（如 React）里直接用内联 style：
style={{ backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'transparent' }}
容易被忽略的一点：伪类本身不触发重排，但如果你在 :nth-child(odd) 里写了 height、transform 等影响布局的属性，叠加大量元素时，浏览器重绘压力会明显上升——变色就老老实实用 background-color 或 opacity。
