:nth-of-type在列表中常失效是因为它只匹配同标签名的兄弟元素，遇其他标签或注释会跳过计数；而:nth-child按DOM位置编号，更适合斑马纹。
为什么 :nth-of-type 在列表里常失效？
直接用 :nth-of-type 给 <li> 加斑马纹，结果隔三差五漏掉几行——不是 CSS 写错了，而是你忘了它只看「同类型兄弟元素」。如果列表里混了 <div>、<p> 或注释节点，<li> 的“序号”会被跳过。比如：
<ul> <li>第一项</li> <div>干扰项</div> <li>第二项</li> <li>第三项</li> </ul>
这时 li:nth-of-type(2) 匹配的是“第三项”，因为 <div> 占了一个位置，但不算 <li> 类型。
-
:nth-of-type数的是「同标签名的兄弟」，不是你在 DOM 里看到的第几个<li> - 只要父容器里有其他标签穿插，序号就不可靠
- 纯
<ul><li>...</li></ul>结构下才勉强安全，但不健壮
:nth-child 才是列表斑马纹的默认选择
对有序列表（<ol>）或无序列表（<ul>），只要所有子元素都是 <li>，:nth-child(odd) 和 :nth-child(even) 就能稳定生效——它按 DOM 树中的实际位置编号，不区分标签类型，但前提是没别的子节点。
-
li:nth-child(odd)→ 第1、3、5…个<li>（位置奇数） -
li:nth-child(even)→ 第2、4、6…个<li>（位置偶数） - 比
:nth-of-type更贴近“视觉上隔行”的直觉 - 兼容性好，IE9+ 都支持
真正需要 :nth-of-type 的场景是什么？
它不是错，只是用错了地方。当你面对的是混合标签结构，又想单独挑出某类元素做样式时，:nth-of-type 才显价值。例如：
立即学习“前端免费学习笔记（深入）”；
<section> <h2>标题</h2> <p>段落1</p> <p>段落2</p> <aside>侧边栏</aside> <p>段落3</p> </section>
此时 p:nth-of-type(2) 稳定匹配“段落2”，不受 <h2> 和 <aside> 干扰。但注意：<!-- 注释 --> 不算任何类型，不影响计数；而 <div class="li-wrapper"><span>文本</span></div> 这种结构里，span:nth-of-type(1) 仍会生效，只要它是该父级下第一个 <span>。
- 适合多类型子元素共存、需独立样式控制的语义化区块
- 不能用于“模拟表格行”或“纯列表隔行”，那是
:nth-child的地盘 - 在 Flex/Grid 容器中行为一致，但若子元素被
display: contents降级，可能意外改变类型计数
性能和维护上容易被忽略的一点
伪类选择器本身开销极小，但写法松散会埋坑。比如用 li:nth-child(2n) 而非 li:nth-child(even)，看似等价，但前者在某些旧版 Safari 中解析更慢；又比如嵌套过深：ul > li > div > span:nth-of-type(1)，不仅难读，一旦中间加个 wrapper 就全挂。
- 优先用
even/odd关键字，语义清晰且引擎优化充分 - 避免在动态插入内容的列表里依赖
:nth-of-type做关键样式（如高亮当前项），因为新节点插入后类型序号可能偏移 - 如果列表由 JS 渲染（React/Vue），更推荐用 class 控制（如
class="item--odd"），把逻辑从 CSS 拉回 JS 层，可控性更高
