:nth-child(n)按父元素所有子元素序号匹配，:nth-of-type(n)仅按同标签兄弟元素序号匹配；奇偶需用2n+1/2n；倒数用:nth-last-child；动态交互须JS加class控制。
nth-child(n) 选中第 n 个列表项
直接用 :nth-child(n) 就能精准命中第 n 个 <li>，前提是它在父容器里是第 n 个子元素（且类型匹配）。比如高亮第 3 个，写 li:nth-child(3) 即可。
注意：它数的是所有子元素的顺序，不是只数 <li>。如果父元素里夹了 <div> 或注释节点，序号会偏移。
ul li:nth-child(3) {
background-color: #ffeb3b;
font-weight: bold;
}
nth-child(2n) 这类公式容易误判奇偶
写 :nth-child(2n) 是选偶数位（2、4、6…），:nth-child(2n+1) 才是奇数位（1、3、5…）。别把 2n+1 错写成 2n-1——后者从第 1 个开始就失效（2×1−1=1 看似对，但 n 从 0 开始代入时结果为 −1，无效）。
常见错误场景：想高亮倒数第 2 个，却错用 :nth-child(-n+2)（这其实是前 2 个），正确写法是 :nth-last-child(2)。
立即学习“前端免费学习笔记（深入）”；
-
:nth-child(3n)→ 第 3、6、9… 个 -
:nth-child(3n+2)→ 第 2、5、8… 个 -
:nth-last-child(1)→ 最后一个（比:last-child更稳，不依赖元素类型）
nth-of-type 更安全，但只认标签名
如果列表里混有其他标签（比如 <p> 或 <span>），用 :nth-child 容易错位；这时改用 :nth-of-type(n)，它只统计同类型（如 <li>）的兄弟元素，更符合直觉。
但注意：:nth-of-type 不识别 class 或属性，只看 HTML 标签名。如果用了自定义元素（如 <my-item>），它照样生效；但若把 <li> 换成 <div class="item">，就得换思路了。
ul li:nth-of-type(3) {
border-left: 4px solid #2196f3;
}
动态高亮需要 JS 配合 nth-child
CSS 的 :nth-child 是静态的，无法响应点击、滚动或数据更新。比如“点击后高亮当前项”，必须靠 JS 切 class：
给目标 <li> 加个 active 类，再用 CSS 控制样式：
ul li.active {
background-color: #4caf50;
color: white;
}
JS 侧只需做两件事：
- 移除所有
li的active类 - 给被点击的那个加
active
别试图用 JS 动态拼 nth-child(5) 这种选择器——既难维护，又容易因 DOM 变动失效。
真正难的不是写对 nth-child，而是判断该用 child 还是 of-type，以及是否真需要 CSS 解决——很多所谓“高亮”本质是状态切换，CSS 只负责呈现，逻辑得交还给 JS。
