nth-child(even)不生效主因是tr父元素为tbody而非table，应写tbody tr:nth-child(even)；nth-of-type在表格中更危险，因跨thead/tbody/tfoot计数；推荐hsl(0,0%,98%)作斑马纹背景。
nth-child(even) 为什么有时不生效
常见错误是直接写 tr:nth-child(even) 却发现偶数行没变色——原因通常是 tr 不是 table 的直接子元素，中间夹了 tbody。浏览器会自动补全 tbody，所以实际 DOM 结构是 table > tbody > tr，而 tr:nth-child(even) 在 tbody 内部才真正起作用。
实操建议：
- 显式写出
tbody tr:nth-child(even)，避免依赖浏览器自动包裹 - 如果用了
thead或tfoot，注意nth-child是按tbody内所有tr编号的，thead中的tr不参与计数 - 用浏览器开发者工具检查真实 DOM 结构，确认
tr的父容器是不是tbody
用 nth-of-type 更稳妥吗
nth-of-type 看似绕过父容器问题，但对表格其实更危险：它按标签类型计数，而 tr 在 thead、tbody、tfoot 中都是同类型，导致编号“跨区连续”。比如 thead 有 1 行，tbody 第 1 行就变成第 2 个 tr，被当成偶数行染色。
实操建议：
- 坚持用
tbody tr:nth-child(even)，明确作用域 - 如果必须兼容无
tbody的手写 HTML（极少见），可加一层兜底：table tr:nth-child(even), table > tr:nth-child(even) - 避免混用
nth-child和nth-of-type在同一表格，逻辑容易错乱
浅色背景选什么值才不刺眼
纯灰如 #f5f5f5 在白底页面上对比度太低，用户可能看不出交替；而 #eef 这类带色相的浅色又容易干扰数据识别。关键不是“浅”，而是“足够区分又不抢戏”。
实操建议：
- 推荐用
hsl(0, 0%, 98%)（近白但非纯白），比#fff暗一档，人眼能感知差异，且适配深色模式切换 - 避免使用
rgba(0,0,0,0.03)类透明叠加，IE 不支持，且在部分屏幕上有发虚感 - 如果表格有悬停高亮，确保斑马色和
:hover背景的明度差 ≥ 15%，否则视觉层级混乱
React/Vue 里动态渲染 tr 会影响 nth-child 吗
不影响。只要最终渲染出的 HTML 是标准的 tbody > tr 结构，CSS 选择器照常工作。问题常出在条件渲染（如 v-if 或 &&）导致某些 tr 被跳过，编号序列断开，看起来“隔两行才变一次色”。
实操建议：
- 用
v-for或.map()渲染时，确保每个数据项都生成一个tr，不要在循环内部做v-if过滤 - 需要过滤数据，先用
.filter()处理数组，再遍历，保持tr序列连续 - 服务端渲染或 SSR 场景下，检查是否因 hydration 不一致导致初始 DOM 和 JS 渲染后结构不同
最常被忽略的是 tbody 的存在感——它不写在 HTML 里，却决定着 nth-child 的计算起点。盯住开发者工具里的实际节点关系，比背规则管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
