本文详解 `nth-child()` 在嵌套结构中的常见误用——当所有 `` 都是其父 `` 的第一个子元素时，`span:nth-child(1)` 无法区分不同链接；应改用 `li:nth-child(n)` 实现对每个导航项的独立样式控制。
在实际开发中，nth-child() 是一个强大但易被误解的选择器。问题根源在于：nth-child() 始终相对于其直接父元素计算序号。在你的 HTML 结构中：
<li><a href=""><span>Philosophie</span></a></li>
每个 <li> 内部只有一个 <a>，而每个 <a> 内部也仅包含一个 <span> —— 因此所有 <span> 都是各自 <a> 的 :nth-child(1)，根本不存在 :nth-child(2) 的 <span>（即 span:nth-child(2):after 永远不匹配）。这就是为什么只有 nth-child(1) 的样式生效，其余被忽略。
✅ 正确做法是：将 nth-child 应用于具有明确顺序关系的同级元素层级，即 <li> 元素本身。每个 <li> 是 #subnav 的第 1、2、3… 个子元素，天然支持精准定位。
以下是修正后的 Sass（含语义化写法与关键注释）：
立即学习“前端免费学习笔记（深入）”；
.container {
#subnav {
margin-top: 2rem;
display: flex;
justify-content: space-evenly;
li {
padding-bottom: 0.5rem;
// 注意：原写法 border-bottom: 4px 0.5rem 是无效语法
// 正确应为 border-bottom: 4px solid #f36e52;
border-bottom: 4px solid transparent; // 初始无色，后续按需设置
// 为每个 li 设置独立样式
&:nth-child(1) {
span {
color: #f36e52; // 首项文字色
&:after {
content: '';
display: block;
width: 30%;
height: 4px;
background-color: #f36e52;
margin-top: 0.3rem;
}
}
}
&:nth-child(2) {
span {
color: #4a90e2; // 第二项文字色
&:after {
content: '';
display: block;
width: 100%;
height: 4px;
background-color: #fff555;
margin-top: 0.3rem;
}
}
}
&:nth-child(3) {
span {
color: #7ed321;
&:after {
content: '';
display: block;
width: 60%;
height: 4px;
background-color: #9013fe;
margin-top: 0.3rem;
}
}
}
// 可继续扩展第4、5项... 或使用循环生成（Sass @for）
}
a {
color: inherit; // 继承 span 的颜色，避免覆盖
text-decoration: none;
display: block; // 确保 :after 正常渲染（需块级上下文）
}
}
}? 关键注意事项：
- :after 伪元素不能直接设置颜色（color 属性对其无效），它只能通过 background-color、border-color 或 content 中的 Unicode 字符来呈现视觉效果；
- 修改链接文字颜色，请直接作用于 span 或 a 元素，而非伪元素；
- border-bottom: 4px 0.5rem 是语法错误，CSS 边框需按 width style color 顺序书写（如 4px solid #f36e52）；
- 若需动态管理多个 nth-child 规则，推荐使用 Sass 循环（@for $i from 1 through 5）提升可维护性。
通过将选择器锚定在 <li> 层级，你不仅能准确控制每项的边框、文字色与装饰条，还能保持 CSS 的可读性与可扩展性。记住：选对父容器，才是 nth-child 发挥威力的前提。
