Sass父选择器的正确用法？自定义链接下划线实现故障排查求助

问题分析与解决方案 #

你遇到的核心问题是自定义下划线的伪元素被错误绑定到了祖辈容器.toolbox上，而非单个链接元素，而SCSS父选择器&的误用加剧了这个问题——&的指向完全取决于它所在的嵌套层级，用错位置就会导致选择器偏离目标元素。

1. 正确的SCSS嵌套写法（让下划线绑定到每个链接）

要让下划线出现在每个链接下方，必须把伪元素的定义嵌套在链接选择器（.toolbox a）内部，此时&就代表当前的链接元素，而非父容器。示例代码如下：

.toolbox {
  // 这里可以写容器的样式，比如内边距、布局等
  padding: 1rem;
  display: flex;
  gap: 1.5rem;

  // 目标：给.toolbox下的每个a标签加下划线
  a {
    position: relative; // 必须设置，让伪元素相对链接定位
    text-decoration: none; // 去掉默认下划线
    color: #2d3748;

    // 自定义下划线的伪元素
    &::after {
      content: ""; // 伪元素必须有content才会显示
      position: absolute;
      bottom: -3px; // 控制下划线与文字的距离
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #3182ce; // 下划线颜色
      transform: scaleX(0); // 初始隐藏下划线
      transition: transform 0.3s ease-in-out; // 动画过渡
    }

    // hover时显示下划线
    &:hover::after {
      transform: scaleX(1);
    }
  }
}

2. 为什么你的代码会出错？

• 如果之前你把&::after写在了.toolbox的直接嵌套里（而非a的内部），那么&就指代.toolbox，下划线自然会出现在整个容器上，而非单个链接。
• 若修改后下划线完全消失，大概率是因为：
  • 伪元素没有设置content属性（必填项）；
  • 链接元素没有设置position: relative，导致伪元素的absolute定位相对于页面而非链接；
  • 选择器层级错误，伪元素没有正确绑定到a标签上。

3. SCSS父选择器&的正确使用场景

在这个需求里，&的作用是简化嵌套层级的选择器书写：

• 在.toolbox a的嵌套中，&等价于.toolbox a，所以&::after就是.toolbox a::after；
• 如果在&:hover中使用，就等价于.toolbox a:hover，避免重复书写冗长的选择器。

只要确保伪元素的定义在a标签的嵌套内部，就能让下划线正确附着在每个链接上，而不是祖辈容器。

内容的提问来源于stack exchange，提问作者lixitrixi