导航栏选中样式不准主因是 :nth-child 匹配逻辑被干扰，应优先用 :nth-of-type 或添加 active 类精准控制。
导航栏选中样式不准，往往不是伪类用错了，而是对 :nth-child 的匹配逻辑理解有偏差——它数的是父元素下的所有同级子元素，不只看你写的 <li>，还包含文字节点、注释、其他标签（比如 <div> 或 <code><span></span>）。
确认实际 DOM 结构是否“干净”
浏览器开发者工具里右键导航项 → “检查”，看选中元素的父容器下到底有几个子节点。常见干扰源：
- HTML 中
<ul></ul>内部换行产生的空白文本节点（尤其在 Pug、Vue 模板或服务端渲染中容易出现） - 动态插入的图标、徽标、分隔符等额外标签
- 条件渲染导致部分
<li>被隐藏但未移除（display: none不影响 :nth-child 计数）
改用 :nth-of-type 更稳妥
如果导航项都是 <li>，且父容器里没有其他 <li> 干扰，:nth-of-type 只统计同类型标签，更符合直觉：
nav ul li:nth-of-type(3) a { color: #007bff; font-weight: bold; }
这样即使前面有注释或 <div>，第 3 个 <code><li> 仍能被精准命中。
立即学习“前端免费学习笔记（深入）”；
给当前项加 class 类名，放弃纯 CSS 定位
最可靠的方式仍是语义化控制：后端或 JS 明确给当前激活项添加 class="active"，再写样式：
nav ul li.active a { color: #007bff; font-weight: bold; }
好处是：
- 完全脱离 DOM 顺序依赖
- 支持响应式切换、路由变化时动态更新
- 可读性和维护性远高于复杂 nth 表达式
需要动态计算？用 CSS 自定义属性配合 JS
若必须用 nth 且位置会变（如菜单排序由用户配置），可在 JS 中设置 CSS 变量：
<ul style="--active-index: 2;"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul>
CSS 中用 :nth-child(var(--active-index))（注意：目前主流浏览器暂不支持在 :nth-child() 内使用变量，仅作思路参考；实际可用 JS 动态加 class 替代）
基本上就这些。别硬扛 :nth-child，该加 class 就加，清晰比炫技重要。
