求助：SCSS中无法为页面<a>标签设置样式的问题

我看到你在给嵌套在.class-name里的a标签设置样式时遇到了问题，咱们先拆解下代码里的关键问题：

核心问题：伪类嵌套错误 #

你在&:link内部嵌套&:visited的写法是不对的——SCSS里的&代表父选择器，这样写会生成a:link:visited这种无效的复合伪类选择器，而:link（未访问链接）和:visited（已访问链接）是互斥的伪类，应该作为a的同级伪类来定义。另外你的:active伪类代码未写完，咱们一起修正完整。

修正后的SCSS代码 #

.class-name{
  @include mixin-name(1.7rem 5rem, 1.5rem, 300, $fade-white);
}

a{
  // 未访问链接
  &:link{
    color: $fade-white;
    text-decoration: none; // 统一设置默认下划线，避免重复代码
  }
  // 已访问链接
  &:visited{
    color: $white;
    text-decoration: none;
    opacity: 0.42;
  }
  // 鼠标悬停状态
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  // 点击激活状态
  &:active{
    opacity: 1;
    text-decoration: none; // 可根据需求调整样式
  }
}

额外优化：提升选择器优先级（如果需要） #

如果修正后样式还是不生效，大概率是.class-name内部的样式优先级更高，你可以把a标签的选择器改成.class-name a，针对性地覆盖样式：

.class-name{
  @include mixin-name(1.7rem 5rem, 1.5rem, 300, $fade-white);
  
  a{
    &:link{
      color: $fade-white;
      text-decoration: none;
    }
    &:visited{
      color: $white;
      text-decoration: none;
      opacity: 0.42;
    }
    &:hover{
      opacity: 0.7;
      text-decoration: underline;
    }
    &:active{
      opacity: 1;
      text-decoration: none;
    }
  }
}

这样调整后，a标签的各个状态样式就能正确生效啦。

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