:nth-child(even) 没生效是因为它按父元素所有子节点统一编号，若中间夹杂其他标签或文本节点，li 的位置序号就错乱；应改用 :nth-of-type(even) 仅对同标签兄弟计数。
为什么 :nth-child(even) 有时没生效？
直接写 li:nth-child(even) { background: #f0f0f0; } 却发现只有第 2、4、6 个 li 被选中，而实际想高亮的是“列表中第 2、4、6… 个 li 元素”——这本身没错，但前提是这些 li 确实是其父容器的偶数子元素。如果父元素里混有其他标签（比如 div、p 或注释节点），:nth-child() 就会按所有子节点统一编号，导致偶数位置被非 li 占用。
常见误判场景：
- HTML 中
ul内部有换行或空格（某些旧版解析器会生成文本节点） - 动态插入了提示文字
<p class="hint">暂无数据</p>在ul里 - 使用了 Web Components 或框架（如 Vue 的
v-if）造成 DOM 结构不连续
:nth-of-type(even) 和 :nth-child(even) 到底该用哪个？
如果目标只是“让所有 li 中的偶数个拥有背景色”，且父容器中 li 不是唯一子元素类型，优先用 :nth-of-type(even)。它只对同类型（即同标签名）的兄弟元素计数，无视中间夹杂的其他标签。
示例对比：
- 第一项
- 第二项
- 第三项
说明文字
-
li:nth-child(even)→ 不匹配任何li（因为li分别在第 1、3、4 位） -
li:nth-of-type(even)→ 匹配第二个li（即“第三项”，它是第 2 个li）
注意：:nth-of-type 不识别 class 或属性，只看标签名；若用 li.item 做选择器，依然只按 li 标签计数。
需要兼容 IE8 吗？那得换思路
:nth-child 和 :nth-of-type 在 IE9+ 才原生支持。如果项目仍需支持 IE8，CSS 层面无解，必须靠 JS 或服务端逻辑加 class：
- 服务端渲染时给偶数
li加class="even" - 前端 JS 遍历后手动添加：
document.querySelectorAll('li').forEach((el, i) => { if ((i + 1) % 2 === 0) el.classList.add('even'); }); - 避免用
:nth-child相关伪类做关键布局，否则 IE8 下样式断裂不可逆
顺带一提：Sass/Less 编译时无法模拟运行时 DOM 结构，所以 @for $i from 2 through 100 step 2 { li:nth-child(#{$i}) { ... } } 这种写法看似“兼容”，实则冗余且不可维护，不推荐。
性能和可维护性提醒
单纯用 :nth-child(even) 没性能问题，但要注意两点：
- 如果列表项通过 JS 动态增删，且依赖 CSS 伪类控制样式，新增的
li会自动获得对应样式，这点很省心 - 但若后续需求变成“偶数项背景色 + 最后一项加边框 + 第三项字体加粗”，全堆在伪类里会让 CSS 难以追踪，建议把语义化强的规则拆成独立 class（如
list-item--even、list-item--last） - 别在
:nth-child(odd)和:nth-child(even)之间用不同单位设置背景（比如一个用rgba()，一个用命名色），容易因透明度叠加导致视觉偏差
真正容易被忽略的是：当列表嵌套多层（比如菜单树），:nth-child(even) 只作用于直接子 li，不会穿透到子菜单里——这点恰恰是它的设计本意，不是 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
