如何用CSS伪类:nth-child(even)和(odd)实现精美布局？-css教程-PHP中文网

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

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

下载

:nth-child(odd) 未生效是因为它按 dom 物理位置计数，受中间非目标标签、注释或空格文本节点干扰；应确保目标元素连续无干扰，或改用 :nth-of-type()。

如何用css伪类:nth-child(even)和(odd)实现精美布局？

:nth-child(even) 和 :nth-child(odd) 本身不负责“精美”，只负责选中偶数/奇数位置的元素；真正决定布局是否美观的是你后续加的样式，以及是否理解它们的匹配逻辑。

为什么 `:nth-child(odd)` 有时没生效？

它按 DOM 树中的物理位置计数，不是按可见元素或你期望的“第1个、第2个内容块”来算。如果父容器里混有其他标签（比如 <div>、<code><p></p>、注释节点、甚至空格文本节点），计数会错位。

常见错误：在 <ul></ul> 里写 <li>，但中间插了个 <div class="separator"> —— 那么第2个 <code><li> 实际可能是第4个子节点，:nth-child(odd) 就不会命中它
解决办法：确保目标元素是连续、无干扰的兄弟节点；或者改用 :nth-of-type()（只看同类型标签）
调试技巧：临时加 outline: 1px solid red; 到 *:nth-child(n) 查看实际匹配范围

和 `:nth-of-type(odd)` 的关键区别在哪？

假设父元素下有：<h2></h2>、<p></p>、<div>、<code><p></p>、<div> <ul> <li> <code>p:nth-child(odd)：匹配第1个 <p></p>（它是第2个子节点，偶数位 → 不匹配）→ 实际不命中任何 <p></p>

p:nth-of-type(odd)：把所有 <p></p> 单独编号，第1个 <p></p> 是 type-1 → 匹配成功
表格场景特别容易踩坑：tr:nth-child(even) 在有 <thead> 或 <code><tbody> 时可能失效，因为 <code><thead> 本身是一个子节点 <h3>实现斑马纹表格时的实用写法</h3> <p>直接用 <code>tr:nth-child(even) 很常见，但要注意结构层级：
```
table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}
table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
```
- 必须限定 tbody，否则 <thead> 的 <code><tr> 会被计入计数，导致第一行数据变色异常 <li>不要只写 <code>tr:nth-child(even)，否则当表格没有 <tbody> 时（部分框架生成的 HTML），样式可能作用到表头 <li>若需兼容老 IE（<code>:nth-child 不支持），得用 JS 动态加类，或改用 tr:nth-of-type + 显式包裹 <tbody> <h3>响应式列表交替背景的陷阱</h3> <p>用 <code>li:nth-child(even) 做卡片列表时，换行后视觉顺序和 DOM 顺序不一致，会导致颜色错乱。
  - Flex/Grid 布局下，:nth-child 仍按源码顺序，不是视觉流顺序 —— 比如两列布局，第1行左卡是 li:nth-child(1)，右卡是 li:nth-child(2)，但第2行左卡是 li:nth-child(3)，颜色就变成和上一行右卡一样了
  - 更稳妥的做法：用 CSS 自定义属性配合 JS 标记序号，或改用 background: linear-gradient(...) 模拟条纹背景
  - 如果坚持用伪类，建议搭配 display: contents（慎用，兼容性有限）或重构为每行一个容器
  真正难的不是写出 :nth-child(even)，而是判断当前 DOM 结构是否允许它按你设想的方式工作 —— 多数“没效果”或“颜色错乱”的问题，根源都在子节点构成上，而不是伪类本身写错了。