优先用 nth-child(odd) 更稳妥，它从第1行起选奇数行，符合“首行浅色、次行深色”预期；需限定作用域如 tbody tr:nth-child(odd) 避免表头干扰，flex下可用，grid中视觉顺序与dom不一致时易出错。
nth-child(2n) 和 nth-child(odd) 哪个更适合斑马线
直接用 nth-child(odd) 更稳妥。它从第 1 行开始算起，对应所有奇数行（1、3、5…），视觉上更符合“第一行浅色、第二行深色”的常规预期；而 nth-child(2n) 选的是偶数行（2、4、6…），得额外给默认背景，稍易错乱。
常见错误是写成 nth-child(even) 却忘了重置父容器默认背景，导致第 1 行没颜色、第 2 行才开始变色——实际看到的是“空一行+色块”，不是交替。
- 优先用
tr:nth-child(odd)或li:nth-child(odd)，再配一个基础背景 - 如果列表项有动态增删，
odd/even比2n更直观，不易误判索引偏移 - 注意：
nth-child是按 DOM 顺序数的，不是按渲染后可见项数——隐藏项（display: none）仍被计入
表格里 tbody 和 thead 的干扰怎么处理
如果不加限定，tr:nth-child(odd) 会把 thead 里的 tr 也一起算进去，结果可能是表头变色、第一行数据反而没色——这是最常被忽略的兼容性坑。
正确做法是限定作用域：只对 tbody 内的 tr 生效。
- 写成
tbody tr:nth-child(odd)，而不是笼统的tr:nth-child(odd) - 如果用了
tfoot，同样要排除，否则页脚行也会参与计数 - 某些框架（如 Vue 渲染的表格）可能不显式写
tbody，此时浏览器会自动补全，但选择器仍需明确写出来才能可靠匹配
颜色值用 #000 和 black 会影响可访问性吗
不影响 nth-child 行为，但影响对比度合规性。纯黑 #000 和纯白 #fff 在多数屏幕上对比度过高，易引发视疲劳；WCAG 推荐正文文本与背景对比度 ≥ 4.5:1，而 #000 对 #fff 是 21:1，远超但不舒适。
- 更实用的组合是
#f9f9f9（浅灰） +#ffffff（白），或#eef2f7+#ffffff - 避免用
rgba(0,0,0,0.05)这类透明叠加，旧版 Safari 对nth-child下的 rgba 渲染偶有闪烁 - 深色模式下，这些浅色可能失效——如需适配，得配合
@media (prefers-color-scheme: dark)单独覆盖
Flex 或 Grid 布局里还能用 nth-child 做斑马线吗
能，但逻辑变了。在 display: flex 容器中，nth-child 仍按 HTML 子元素顺序生效；但在 display: grid 且启用了 grid-template-areas 或 grid-row 显式定位时，DOM 顺序和视觉顺序可能不一致，导致“色块跳行”。
- Flex 布局下，
div:nth-child(odd)照常工作，前提是子元素是连续的、未被order打乱 - Grid 布局中，若用
grid-row: span 2合并单元格，该元素仍只占一个nth-child位置，不会“跳过”后续项 - 真正容易出问题的是 JS 动态插入节点后未触发重排——此时新节点的
nth-child索引已定，但样式可能没及时更新，需确认 CSS 无缓存或强制重绘
visibility: hidden 或条件渲染跳过时，nth-child 依然计数——这时候就得换思路，比如改用 JS 手动加 class，或者用 :nth-of-type 配合标签类型过滤。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
