:nth-child(2n) 按父元素所有子元素物理顺序计数，非仅同类型标签；:nth-of-type(2n) 才按同标签类型计数，适用表格行、列表项等场景。
为什么 :nth-child(2n) 看似选偶数却没高亮？
因为 :nth-child() 是按**父元素下所有子元素的物理顺序**计数，不是只算同类型标签。比如父容器里有 <div>、<p>、<span> 交错排列，:nth-child(2n) 会把它们全算进去——第2个、第4个、第6个……无论是什么标签。如果你只想选 <li> 或 <tr> 中的偶数项，但前面插了标题、空行或其它元素，索引就全乱了。
:nth-of-type(2n) 才是真正按标签类型选偶数
它只统计**同种标签名**的兄弟节点，跳过其它类型。适合表格行、列表项这类结构清晰的场景。
- 要给表格偶数行加背景：
tr:nth-of-type(2n) { background: #f5f5f5; } - 要选
<section>中第2、4、6个<p>：p:nth-of-type(2n) - 注意：如果目标元素本身被包裹（比如
<div><p>...</p></div>），那每个<p>都是各自父级下的第一个<p>，:nth-of-type(2n)就失效了——得确保它们是同一父级下的直系兄弟
结构不干净时，用类名 + CSS 变量控制更可靠
当 DOM 结构不可控（比如 CMS 输出、第三方组件嵌入），硬靠伪类容易翻车。不如让 JS 或模板层主动打标：
.row:nth-child(odd) { --row-index: 1; }
.row:nth-child(even) { --row-index: 2; }
/* 或直接输出 class */
<div class="row row-even">...</div>
<div class="row row-odd">...</div>然后用 .row-even 写样式，完全绕开索引计算逻辑。这对 SSR 页面、需要服务端渲染兼容性的项目尤其稳妥。
立即学习“前端免费学习笔记（深入）”；
调试时别信“看起来是第2个”，用 DevTools 看真实 DOM 树
浏览器开发者工具里右键元素 → “Edit as HTML”，删掉干扰节点（比如注释、空文本节点、隐藏的 <script>）再试，常能立刻定位问题。另外，:nth-child(n) 的 n 从 1 开始，2n 等价于 even，但 2n+1 ≠ odd 在某些老浏览器中有兼容差异，建议优先用 odd/even 关键字。
最常被忽略的是：伪类匹配发生在渲染前，它不感知 display: none 或 visibility: hidden —— 那些元素依然占索引位置。
