CSS:nth-child选择器如何实现奇偶行样式-css教程-PHP中文网

:nth-child(odd)和:nth-child(even)是最简洁的奇偶行选择器，语义清晰、兼容性好（ie9+），但匹配的是元素在父元素中的绝对位置，受注释、空格、其他类型子元素及隐式tbody影响；需用tbody tr:nth-child(odd)确保准确，或改用:nth-of-type(2n+1)规避类型干扰。

css:nth-child选择器如何实现奇偶行样式

nth-child(odd) 和 nth-child(even) 是最直接的写法

想给表格或列表的奇数行加背景色，直接用 :nth-child(odd)；偶数行就用 :nth-child(even)。这两个是 CSS 原生支持的关键词，语义清晰、兼容性好（IE9+ 都支持），不需要算公式。

常见错误是写成 :nth-child(2n+1) 或 :nth-child(2n) —— 虽然结果一样，但没必要绕弯。除非你要做更复杂的模式（比如每 3 行高亮第 1 行），否则优先选 odd/even。

tr:nth-child(odd) 匹配的是父容器下第 1、3、5… 个 tr 元素，和内容是否为“数据行”无关
如果表格里有 thead 或 tfoot，它们也会计入序号，可能导致样式错位
想只对 tbody 里的行生效？得写成 tbody tr:nth-child(odd)

为什么有时候 nth-child(odd) 不生效？

根本原因：伪类匹配的是「元素在其父元素中的位置」，不是「当前元素在同类元素中的顺序」。比如一个 div 里混着 p、span、div，那么 div:nth-child(odd) 只会选中第 1、3、5… 个子节点且该节点恰好是 div 的那些。

典型陷阱：

父容器里有注释节点、文本节点（比如换行空格）—— 它们也算子节点，会干扰序号计算
用了 display: none 的兄弟元素仍参与计数，但 visibility: hidden 不影响
动态插入元素后没重置序号逻辑，导致新元素样式错乱

调试建议：打开开发者工具，逐个检查目标元素的父节点子元素列表，确认它的实际位置序号。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

替代方案：nth-of-type 更关注元素类型

如果父容器里兄弟元素类型不统一，又只想按同类型元素排序，改用 :nth-of-type(odd) 更可靠。它只统计同名标签（比如所有 li），跳过其他类型节点。

对比示例：

ul > li:nth-child(odd) { background: #eee; }
ul > li:nth-of-type(odd) { background: #ddd; }

当 ul 中穿插了 <div></div> 或注释时，nth-child 的序号会偏移，而 nth-of-type 不会。

nth-of-type 不支持 odd/even 关键词，只能写 (2n+1) 或 (2n)
它无法匹配类名或属性，纯看标签名，所以 div.foo:nth-of-type(odd) 中的 .foo 不影响计数逻辑
性能上两者差异极小，不用刻意优化

真正要小心的是 tbody 的隐式包裹

HTML 解析器会自动把 tr 塞进 tbody，即使你没写。这意味着：table tr:nth-child(odd) 实际匹配的是 tbody 下的序号，而不是整个 table 的子元素——这反而成了默认行为下的“正确表现”。但如果你显式写了 tbody，又在它外面加了 caption 或 colgroup，序号就又变了。