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