使用SASS（非SCSS）实现锚点悬停时&hover失效求助

嘿，我之前刚踩过这个缩进式SASS的坑！你遇到的&hover不生效问题，大概率是犯了两个常见错误之一——要么是**&后面漏了冒号**，要么是缩进不符合SASS的严格要求。咱们一步步排查解决：

先看最容易踩的坑：错误写法示例 #

// 错误1：伪类前漏了冒号，这会编译出无效的选择器
a
  color: #333
  &hover  // 正确应该是&:hover！
    color: #ff4400

// 错误2：缩进层级不对，把&:hover嵌套到了属性的层级里
a
  color: #333
    &:hover  // 这里缩进比父选择器多了一级，属于错误嵌套
      color: #ff4400

第一种错误会让编译后的CSS出现ahover这种完全无效的选择器，第二种则会把:hover规则嵌套到错误的层级，根本不会作用在a标签上。

正确的SASS写法（缩进式） #

按照SASS缩进语法的规范，正确的代码应该是这样的：

a
  color: #333
  text-decoration: none
  // &必须和父选择器的属性在同一缩进层级，伪类前一定要加冒号
  &:hover
    color: #ff4400
    text-decoration: underline

编译后的正常CSS #

上面的代码会被编译成符合预期的CSS：

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #ff4400;
  text-decoration: underline;
}

额外排查点：CSS优先级覆盖 #

如果代码写对了还是没效果，打开浏览器开发者工具（F12）检查a标签的hover样式——是不是被其他更高优先级的规则覆盖了？比如有内联样式、带类名的选择器（比如.nav-link:hover）优先级比单纯的a:hover高。这种情况可以调整选择器的优先级，比如：

.header-nav a
  color: #333
  &:hover
    color: #ff4400

最后别忘了确认你的SASS编译工具是正常工作的——有时候编译失败会导致CSS里没生成对应的:hover规则，去检查下编译后的CSS文件就知道啦。

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