: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)。它只对同类型（即同标签名）的兄弟元素计数，无视中间夹杂的其他标签。
示例对比：
立即学习“前端免费学习笔记（深入）”；
<ul>
<li>第一项</li>
<p>说明文字</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<li>第二项</li>
<li>第三项</li>
</ul>
-
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。
