tbody tr:nth-child(even) 是最稳妥的写法，因直接使用 tr:nth-child(even) 会受 干扰导致首行数据误染色，必须限定作用域于 tbody 才能准确匹配数据行。
tbody tr:nth-child(even) 是最稳妥的写法
直接用 tr:nth-child(even) 很容易踩坑——只要表格里有 <thead>，第一行 <code><tr> 就是表头，它占了序号 1，导致 <code>tbody 里的第一行变成第 2 个子元素，被 even 命中，结果表头没色、首行数据反而染上了。所以必须限定作用域：tbody tr:nth-child(even) 才能确保只影响数据行。
常见错误包括：
- 写成
table tr:nth-child(even)，把<thead> 和 <code><tbody> 混在一起数 <li>漏掉 <code>tbody但又没删掉<thead>，导致视觉奇偶和选择器奇偶错位 <li>在 Vue/React 渲染后 DOM 结构变化（比如自动包裹 <code><tbody>），而 CSS 还按旧结构写 <h3>nth-child(odd) 和 nth-child(even) 别混用</h3> <p><code>nth-child(odd)和nth-child(even)语义清晰、行为确定，但不能在同一规则里交叉替换。比如你写了tbody tr:nth-child(odd) { background: #f9f9f9; }，就别再补一条tbody tr:nth-child(even) { background: #fff; }—— 后者会覆盖前者对偶数行的默认背景，但更关键的是：如果某行因 JS 动态插入或 rowspan 合并导致 DOM 位置偏移，even可能漏匹配，留下“白块”。实操建议：
- 只设一个规则，比如用
tbody tr:nth-child(even)加浅灰背景，其余行保持透明或继承父级背景 - 避免同时写
odd和even两套背景色，除非你明确需要三段式或更高阶循环 - 颜色值推荐用
rgba(245, 245, 245, 0.9)而非纯色，减少与边框、文字的硬对比
遇到 nth-child 不生效？先查这三件事
不是选择器写得不对，而是环境没对上。打开浏览器开发者工具，点开任意一条数据行
<tr>，看 computed 样式里 background 是否被覆盖，再顺藤摸瓜确认： <ul><li>它的父元素是不是你写的那个 <code>tbody？有些框架（如 DataTables）会重绘 DOM，把原<tbody> 替换成新容器，甚至删掉标签名 <li>有没有 <code>!important或内联style="background:..."直接干掉 CSS 规则 - 只设一个规则，比如用
- 运行
document.querySelectorAll('tbody tr')和document.querySelectorAll('tbody tr:nth-child(even)')，看后者数量是否约等于前者的一半；如果远少于一半，说明 DOM 里插了注释、空格文本节点或隐藏<tr style="display:none"> 干扰了序号 <h3>深色模式和 hover 要后置声明</h3> <p><code>nth-child规则本身不感知系统主题，也不响应交互。所以：- 深色模式下斑马纹发灰看不清？得单独加媒体查询：
@media (prefers-color-scheme: dark) { tbody tr:nth-child(even) { background-color: #333; } } -
tr:hover效果没反应？因为 CSS 层叠顺序问题——hover 规则必须写在nth-child之后，否则会被后者 background 覆盖 - 移动端小屏下斑马纹“断层”？不是样式失效，而是表格被转成卡片流（
display: block），此时tr已不是表格行语义，nth-child仍按 DOM 顺序工作，但视觉节奏已变。这时该用媒体查询重置：@media (max-width: 768px) { tbody tr { background: none; } }
nth-child，而是你没法靠肉眼判断它到底“数到了哪一行”。DOM 结构稍一变动，序号就偏，颜色就错。盯住具体容器、验证实际节点数量、留一手 fallback（比如 class 手动标记），比背公式管用得多。 - 深色模式下斑马纹发灰看不清？得单独加媒体查询：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
