CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

:nth-child(2n)有时不生效是因为它按父元素所有子元素计数，而非仅；正确写法是tbody tr:nth-child(2n)，且需确保结构规范、避免干扰节点。

直接用 :nth-child(2n) 或 :nth-child(odd) 就能实现，但必须确保目标 是其父容器（如 ）的直系子元素，否则选中会失效。

为什么 :nth-child(2n) 有时不生效？

常见原因是表格结构里混入了非 元素，比如 、、 或注释/空格文本节点。此时 :nth-child 按所有子元素顺序计数，而非仅 。

• ✅ 正确写法：给 下的 单独加样式，例如 tbody tr:nth-child(2n)
• ❌ 错误写法：直接写 table tr:nth-child(2n) —— 如果 有 1 行，那第 1 个 实际是第 2 个子元素，不会被 2n 匹配到
• ⚠️ 注意：IE8 及更早版本完全不支持 :nth-child()，需用 JS 或服务端生成 class

:nth-child(odd) 和 :nth-child(even) 更稳妥吗？

是的，它们语义清晰、兼容性略好（IE9+），且不受前面非 元素干扰——只要明确作用在 内部即可。

• 给奇数行（第 1、3、5… 行）设背景：tbody tr:nth-child(odd) { background: #f9f9f9; }
• 给偶数行（第 2、4、6… 行）设背景：tbody tr:nth-child(even) { background: #eef2f7; }
• 如果表格没包 ，浏览器会自动补上，但显式写出更可靠，也方便 CSS 选择器定位

  想从第 2 行开始隔行变色？用公式表达式

  比如希望第 2、4、6… 行高亮，但第一行是表头（），这时不能只靠 even，得用 2n+2 这类公式。

  • tbody tr:nth-child(2n+2) → 匹配第 2、4、6… 个 （即视觉上的第 1、2、3… 条数据行）
  • tbody tr:nth-child(2n+1) → 若表头在 里，这个会匹配 中第 1、3、5… 行
  • 公式 an+b 中的 a 控制周期，b 控制起始偏移；负值如 2n-1 在某些旧版 Safari 有解析问题，尽量避免

  真正容易被忽略的是 HTML 结构隐含的层级关系——:nth-child 数的是“第几个子”，不是“第几个 ”。哪怕只是多了一行 或一个空格换行，都可能让样式错位。动手前先用浏览器开发者工具检查目标 的实际子元素序号。

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