:nth-child(odd)和:nth-child(even)可直接实现列表隔行变色，但需确保父元素下仅含<li>标签；若混杂其他节点，应改用li:nth-of-type(odd/even)以精准匹配<li>元素，避免序号偏移。
怎么用 :nth-child(odd) 和 :nth-child(even) 给列表隔行变色
直接写就能生效，不需要 JavaScript。关键是要理解 :nth-child 是按父元素下的所有子元素顺序计数，不是只看 <li> —— 如果列表里混了其他标签（比如注释、<div> 或空格文本节点），序号可能错位。
-
:nth-child(odd)匹配第 1、3、5… 个子元素（即奇数位置） -
:nth-child(even)匹配第 2、4、6… 个子元素（即偶数位置） - 要确保目标是纯
<ul>或<ol>，且内部只有<li>，否则序号容易偏移
为什么 :nth-of-type 有时比 :nth-child 更稳妥
当列表中存在非 <li> 元素（如辅助 <span>、<div> 或服务端注入的占位节点），:nth-child 会把它们一起计数，导致样式“跳项”。这时改用 :nth-of-type 只统计同类型标签（<li>），更可靠。
-
li:nth-of-type(odd)→ 只对第 1、3、5… 个<li>生效，无视中间夹杂的其他标签 - 注意：不能写成
ul li:nth-of-type(odd)，因为<li>的兄弟节点必须是其他<li>才算“同类型”；若父容器下还有<p>等，不影响计数 - 兼容性没问题，IE9+ 都支持
常见错误：背景没生效或全白/全灰
最常踩的坑是 CSS 优先级或继承干扰。比如父级设了 background-color，或者某条规则用了 !important 锁死颜色；也可能是伪类写法有误（漏空格、括号不匹配）。
- 检查是否误写成
li:nth-child(odd){}（少冒号）→ 正确是li:nth-child(odd){} - 确认没有更高优先级的选择器覆盖，例如
ul li { background: #fff; }会压过:nth-child规则 - 避免在
<li>上同时设background和background-color，后者会被前者覆盖
ul li:nth-child(odd) {
background-color: #f5f5f5;
}
ul li:nth-child(even) {
background-color: #ffffff;
}
如果列表结构复杂、动态插入内容频繁，或者需要兼容老版本 IE（:nth-child 或 :nth-of-type 就够用，别绕弯。真正要注意的，是 DOM 结构是否干净。
