tr:nth-child(odd)不生效是因为未限定作用域，浏览器将thead、caption等兄弟节点计入父元素子序号，导致tbody内数据行序号错位；应使用tbody tr:nth-child(odd)精准匹配。

直接用 tr:nth-child(even) 和 tr:nth-child(odd) 就能实现，但必须限定作用域，否则表头、注释或动态插入的行会破坏计数逻辑。

为什么 tr:nth-child(odd) 有时不生效

常见原因是没限制父容器，比如只写 tr:nth-child(odd)，浏览器会把 里的 也计入序号——第1行是表头，第2行才是数据行，结果第一行数据被当成“偶数行”，颜色错位。

• 正确做法：用 tbody tr:nth-child(odd) 和 tbody tr:nth-child(even)
• 如果表格没显式写 ，浏览器会自动补上，但选择器仍要写 tbody 才可靠
• 避免用 tr:nth-of-type()：它受注释、空格文本节点干扰，实测计数不稳定

tbody tr:nth-child(even) 和 table tr:nth-child(even) 差在哪

前者只匹配 内的 ，后者会把 、 甚至注释前的 全部算进去。在有表头的表格里，后者大概率导致第一行数据染错色。

• 示例：表头1行 + 数据4行 → table tr:nth-child(odd) 会选中第1、3、5行（即表头、第2行数据、第4行数据）
• tbody tr:nth-child(odd) 则精准命中第1、3行数据
• 动态插入新行时，只要 append 到 ，CSS 规则自动生效；若误插到 直接子节点，就可能脱离作用域

  颜色值和边框怎么配才不出问题

  十六进制或 rgba() 最稳妥，命名色如 lightgray 在不同浏览器渲染差异大；同时必须设 border-collapse: collapse，否则背景色会被默认分离边框割裂出白缝。

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  • 推荐写法：table { border-collapse: collapse; }
  • 避免在
  ，都可能导致 DOM 重建后样式短暂丢失或计数重置——这时候不是 CSS 写错了，而是 DOM 操作方式触发了意外重排。
  上用内联 style="background-color: ..."，会覆盖 CSS 伪类规则

  若需兼容 IE8 及更早版本，得用 JS 遍历设 className 或 style.backgroundColor，但现代项目基本不用考虑

  最容易被忽略的是：即使写了正确的选择器，如果表格结构里混入了注释、空格文本节点，或者用了 innerHTML 重写整个

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！