:nth-of-type(odd)常失效是因为它按同类型兄弟元素序号计数，而非位置；混入注释、空格等文本节点会导致错位，应优先用:nth-child(odd)确保视觉奇偶准确。
为什么 :nth-of-type(odd) 在列表中常失效
直接对 <li> 用 :nth-of-type(odd) 看似合理，但实际常不生效——因为 :nth-of-type 是按**兄弟元素的标签类型和顺序**计数的，不是按它在父容器里的位置。如果 <ul></ul> 或 <ol></ol> 里混有其他标签（比如注释、<div>、<code><span></span>，甚至空格换行产生的文本节点），<li> 的“type 序号”就会错位。更常见的是，开发者误把它当成了 :nth-child(odd) 来用。
:nth-child(odd) 才是列表奇偶边框的正确选择
对纯 <li> 列表（无其他子元素干扰），应优先用 :nth-child：它只看元素在其父元素中的位置序号，与类型无关，语义清晰、行为可预测。
- 给奇数项加顶部边框：
li:nth-child(odd) { border-top: 1px solid #ccc; } - 给偶数项加底部边框：
li:nth-child(even) { border-bottom: 1px solid #eee; } - 若想首项不带顶边框，可叠加
:first-child覆盖：li:nth-child(odd):not(:first-child) { border-top: 1px solid #ccc; }
真要用 :nth-of-type？先确认 DOM 结构干净
只有当 <ul></ul> 下**严格只有 <li> 元素**（无注释、无空格换行、无其他标签）时，:nth-of-type(odd) 和 :nth-child(odd) 效果才一致。但这种“干净”在真实项目中极难保证——模板引擎、JS 动态插入、Prettier 格式化都会悄悄引入文本节点。
- 检查方法：打开 DevTools → 选中
<ul></ul>→ 展开子节点，看是否有非<li>的#text节点 - 若存在，
li:nth-of-type(2)可能对应视觉上的第 3 个<li>，导致边框错位 - 强行清理结构成本高，不如改用
:nth-child或 JS 动态加 class
边框样式冲突与重置要点
奇偶项分别设边框时，相邻两项可能产生双倍粗细或颜色叠加（比如上一项的 border-bottom 和下一项的 border-top 同时存在）。这不是选择器问题，而是 CSS 盒模型叠加逻辑。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用单侧边框：全用
border-bottom（偶数项设为none）或全用border-top（奇数项设为none） - 若必须上下都有，记得重置另一侧：
li:nth-child(odd) { border-top: 1px solid #333; border-bottom: none; } - 注意
box-sizing: border-box对高度的影响——边框会挤占内容空间，奇偶高度不一致时布局可能抖动
:nth-of-type 的语义正确性，先看 DOM 是否可控；绝大多数列表场景，:nth-child 更稳，也更接近你想要的“视觉奇偶”。
