tr:nth-child(even)背景不生效主因是dom结构干扰或优先级覆盖，应改用tr:nth-of-type(even)并检查thead/tbody影响、动态渲染及无障碍对比度。
table tr:nth-child(even) 背景不生效？检查选择器优先级和HTML结构
直接写 tr:nth-child(even) 却没变色，大概率是CSS被覆盖或HTML里有thead/tbody干扰了。浏览器计算 :nth-child() 是按 DOM 树里的**实际子元素顺序**数的，不是按“视觉上的第几行”算。
比如表格里写了 <thead><tr>...</tr></thead>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>，那第一个 <tr> 是 <code><thead> 的第一个子元素（<code>nth-child(1)），第二个 <tr> 是 <code><tbody> 的第一个子元素（也是 <code>nth-child(1)），它不会继承父容器外的计数 —— 所以你写的 tr:nth-child(even) 可能根本没匹配到任何 tr。
- 用浏览器开发者工具选中某行
tr，看 computed styles 里背景色是否被其他规则覆盖 - 改用
tbody tr:nth-child(even)或tr:nth-of-type(even)更稳妥（:nth-of-type按同类型标签计数，忽略thead等） - 确保没有内联样式或更高优先级的类（如
.row-active { background: red !important; }）强行覆盖
nth-child(even) 和 nth-of-type(even) 的行为差异
:nth-child(even) 数的是父元素下所有子节点中的第几个，而 :nth-of-type(even) 只数同为 tr 标签的兄弟节点。实际表格中，后者更符合直觉。
-
tr:nth-child(even)：如果thead里有 1 行，tbody里第 1 行其实是整个table的第 2 个子元素 → 匹配成功；但若thead有 2 行，tbody第 1 行就是第 3 个子元素 → 不再匹配even -
tr:nth-of-type(even)：只管tr标签本身，不管前面有没有caption、colgroup或thead，数到第 2、4、6… 个tr就生效 - 推荐默认用
tr:nth-of-type(even)，兼容性一样好（IE9+），语义更稳
交替行样式在响应式表格或动态渲染时容易失效
用 JS 动态插入 tr（比如 Vue/React 渲染列表、AJAX 加载新行），或者用了 display: block 改表格布局，都会让 :nth-child / :nth-of-type 失效 —— 因为它们依赖 DOM 树结构，不感知逻辑分组。
- 动态增删行后，浏览器不会自动重算伪类，但一般会刷新样式；如果没反应，手动触发一次
tr的 class 切换（如加个临时 class 再移除）可强制重绘 - 响应式表格常把
table改成display: block，此时tr不再是块级表格行，:nth-of-type仍有效，但视觉上可能错位 —— 这时候不如用 JS 控制 class（如row-odd/row-even） - 真要保 CSS 方案，可用
tbody tr:not(:first-of-type):not(:last-of-type)配合其他逻辑，但复杂度陡增，不推荐
颜色对比度与可访问性容易被忽略
交替背景只是视觉优化，但如果浅灰配深灰（比如 #f5f5f5 和 #ffffff），色差太小，对低视力用户或投影场景几乎无效，还可能违反 WCAG 对比度要求。
- 用浏览器插件（如 axe DevTools）检查行背景与文字的对比度，正文文本至少需 4.5:1
- 别只设
background-color，记得同步调整color（尤其 hover 或选中状态） - 深色模式下硬编码颜色会翻车，优先用
prefers-color-scheme媒体查询或 CSS 自定义属性控制主题色
伪类交替看着简单，但一动真格就卡在结构理解、动态更新和无障碍细节上。别只盯着能不能变色，先盯住 DOM 树长什么样，再决定用 :nth-child 还是 :nth-of-type，最后才调颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
