Sass中&运算符与伪选择器失效问题求助

问题根源分析 #

你的代码逻辑本身没问题，但大概率是CSS伪类声明顺序错误或者样式被其他规则优先级覆盖导致的。

具体修复步骤 #

1. 遵循LVHA伪类顺序原则
   CSS链接伪类的生效顺序必须严格遵循：:link → :visited → :hover → :active。如果:hover写在:visited之前，已访问链接的:visited样式会覆盖:hover，导致悬停效果失效。调整Sass代码如下：

a {
  &:link {
    color: #333; /* 可选，定义未访问链接的基础色 */
  }
  &:visited {
    color: cyan;
  }
  &:hover {
    color: orangered;
  }
  &:active {
    color: darkred; /* 可选，定义点击瞬间的颜色 */
  }
}

2. 提升样式权重（解决被覆盖问题）
   如果页面存在全局CSS框架、其他自定义样式，可能会通过更高权重的选择器覆盖你的伪类样式。可以使用更具体的选择器提升权重：

dl dt a {
  &:visited {
    color: cyan;
  }
  &:hover {
    color: orangered;
  }
}

尽量避免使用!important，优先通过增加选择器特异性来提升权重

3. 验证编译与加载情况

• 检查Sass是否正确编译为CSS，编译后的代码应无语法错误
• 打开浏览器开发者工具（F12），在Elements面板查看<a>元素的样式，确认你的伪类规则是否被加载，若被划掉则说明被其他样式覆盖

4. 清除浏览器缓存
   强制刷新页面（Ctrl+F5）或清除浏览器缓存，避免旧CSS文件干扰新样式的生效

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