CSS nth-child 选择器的正确嵌套用法：如何精准定位子元素并应用样式

✅ 正确做法是：将 nth-child 应用于具有明确顺序关系的同级元素层级，即

以下是修正后的 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）提升可维护性。

通过将选择器锚定在