本文详解 `:nth-child()` 在嵌套结构（如 `
CSS 的 :nth-child(n) 是一个基于父元素内兄弟节点顺序的伪类选择器，它只关心目标元素在其直接父容器中的位置索引，而非其内容或标签类型。在你的 HTML 结构中：
<li><a href=""><span>Philosophie</span></a></li>
每个 <span> 都是其父 <a> 标签下的唯一子元素（即第一个且唯一的子节点），因此 span:nth-child(1) 对所有 <span> 都成立——这正是你观察到“只有第一个规则生效”（实际是全部匹配但后定义的样式被覆盖）或视觉上未达预期效果的根本原因。
✅ 正确做法：将 :nth-child() 应用于具有明确序号关系的层级——即 <li> 元素本身。因为 <li> 是 <ul id="subnav"> 的直系子元素，且按顺序排列（第1个、第2个……），天然适配 :nth-child()。
以下是优化后的 Sass 代码（含注释与最佳实践）：
立即学习“前端免费学习笔记（深入）”；
.container {
#subnav {
margin-top: 2rem;
display: flex;
justify-content: space-evenly;
li {
padding-bottom: 0.5rem;
// 修正：border 声明语法错误（原为 "4px 0.5rem" → 应为 width style color）
border-bottom: 4px solid #f36e52;
// 按 li 序号分别定制内部 span 样式
&:nth-child(1) {
a > span {
color: #ff4757; // 如：Philosophie 使用红色
&:after {
content: '';
display: block;
width: 30%;
height: 4px;
background-color: #f36e52;
margin-top: 0.3rem;
}
}
}
&:nth-child(2) {
a > span {
color: #2ed573; // Musiciens 使用绿色
&:after {
content: '';
display: block;
width: 100%;
height: 4px;
background-color: #fff555;
margin-top: 0.3rem;
}
}
}
&:nth-child(3) {
a > span {
color: #3742fa;
&:after { width: 70%; background-color: #5f27cd; }
}
}
&:nth-child(4) {
a > span {
color: #ffa502;
&:after { width: 90%; background-color: #00d2d3; }
}
}
&:nth-child(5) {
a > span {
color: #ff6b6b;
&:after { width: 50%; background-color: #ff9ff3; }
}
}
}
a {
color: inherit; // 确保 a 继承 li 中 span 的颜色（避免被 a 默认色覆盖）
text-decoration: none;
}
}
}? 关键注意事项：
- ✅ 选择器层级必须精确：li:nth-child(1) a > span 明确限定作用域，避免全局污染；
- ✅ :after 伪元素需设 display: block 或 inline-block 才能设置宽高（默认 inline 不支持尺寸）；
- ✅ !important 应尽量避免：示例中已移除，通过提升选择器特异性（如 li:nth-child(2) a > span:after）更可靠；
- ✅ 语义化与可维护性：若导航项未来动态增减，建议结合 CSS 自定义属性（--accent-color）或 JavaScript 动态绑定类名，而非硬编码 :nth-child(n)。
总结：nth-child 的本质是“数兄弟”，不是“数内容”。找准父容器、锚定有顺序的直系子元素（如 li），再向下精细化控制子代样式，才能真正实现逐项差异化设计。
