:nth-child(2n+1)按父元素所有子元素序号选中奇数位置元素，不区分标签类型；若存在其他节点（如div、注释或空白文本节点），则实际li的序号偏移，导致视觉奇数项未被选中。
为什么 :nth-child(2n+1) 不总能选中“视觉上”的奇数项
它确实选中 DOM 树中位置为 1、3、5… 的子元素，但前提是这些元素是同级且连续的 <li>。如果列表里夹杂了其他标签（比如 <div>、<p> 或注释节点），:nth-child 会把它们一起计数——这时第 1 个 <li> 可能是 :nth-child(3)，而 :nth-child(2n+1) 就会跳过它。
- 只看父元素下的**所有子元素序号**，不区分标签类型
- 哪怕你只写
<ul><li>A</li><li>B</li></ul>，浏览器也可能因换行/空格插入文本节点，影响计数（现代浏览器通常忽略纯空白文本节点，但不可依赖） - 若需严格按
<li>自身顺序选，应改用:nth-of-type(2n+1)
:nth-of-type(2n+1) 和 :nth-child(2n+1) 的关键区别
:nth-of-type 只统计同种标签的兄弟节点，更符合“第几个 <li>”的直觉；:nth-child 统计所有兄弟节点，适合需要跨类型定位的场景（比如“每行第一个单元格”，不管是不是 <td>）。
-
:nth-of-type(2n+1)：只对<li>标签编号，跳过<div>、<span>等其他兄弟 -
:nth-child(2n+1)：对父元素下第 1、2、3… 个子节点编号，不管是什么标签 - 两者在干净的
<ul><li>...</li></ul>中效果一致，但一旦结构复杂，行为立刻分叉
实际写法与常见错误
直接写 li:nth-child(2n+1) 是安全的，但别漏掉标签名限定——:nth-child 本身不带语义，必须配合元素选择器使用，否则无效。
- ✅ 正确：
ul li:nth-child(2n+1) { background: #eee; } - ❌ 错误：
:nth-child(2n+1) { ... }（没指定目标元素，CSS 规则不生效） - ⚠️ 注意：不要写成
li:nth-child(odd)就以为更清晰——虽然合法，但odd和2n+1行为完全等价，且部分老版本 Safari 对odd支持不稳定 - 性能无差异，两者编译后都是相同匹配逻辑，无需为“性能”刻意选其一
当列表项动态增删时要注意什么
CSS 伪类是实时计算的，每次 DOM 变更后浏览器会重新评估每个元素是否匹配 :nth-child 或 :nth-of-type。这意味着：添加一个新 <li> 到开头，原来所有“奇数项”的样式都会翻转。
立即学习“前端免费学习笔记（深入）”；
- 这不是 bug，是预期行为——序号随 DOM 位置重排而更新
- 如果需要“固定样式”（比如第 1、3、5 条数据始终高亮），得靠 JS 控制 class，不能依赖
:nth-* - 服务端渲染或 SSR 场景下，确保首屏 HTML 结构和客户端 JS 操作前的状态一致，否则可能出现闪动
