Css 嵌套SCS以更改：：启用后的背景颜色：悬停 客观的

将鼠标悬停在链接上时呈现橙色

默认为深色

我知道我可能还有其他冲突。但我是否至少正确地嵌套了这个订单

背景 我有这个问题之前想要一个彩色层在我的图像。我能在那里得到较暗的一层。但当悬停在上空时，不应看到黑暗层，而应替换为橙色

代码 我有这个

HTML 我知道我可能还有其他冲突。但我是否至少正确地嵌套了这个订单

嵌套似乎不正确。在选择器3（当前由所有浏览器实现的标准）中，伪类可能不会出现在伪元素之后，但在

：after

规则中有一个

：hover

规则，即伪元素中的伪类。如果Sass没有完全拒绝编译您的代码，那么它可能正在将代码编译成如下内容：

li > a::after:hover {
  background-color: rgba(255,128,0,0.5);
}

这是无效的CSS，因此无法使用

如果要更改

a:hover

上的

：：after

的色调，最好的方法是这样做，因为伪元素必须最后出现，但

：hover

是规则不同的地方：

li {
  > a {
    &::after {
      background-color: rgba(30,30,30,0.6);
    }
    &:hover {
      &::after {
        background-color: rgba(255,128,0,0.5);
      }
    }
  }
}

---

（如果不需要如此精细的嵌套，可以选择将

li>a

和

&:hover:：after

部分展平）

类似这样的内容：？@Jack是的，效果很好。由于某种原因，当我在我的真实项目中实现代码时，黑色层保留下来，而不是橙色层。除非你有Sass->CSS编译问题，否则只发布编译后的CSS（不要使用与Sass相关的标记）@JGallardo：你能用真实项目中的代码创建一个演示吗？问题似乎出现在代码的其他地方。对我来说，这似乎是一个非常简单的纯SCS创作问题。dupe链接告诉您什么是有效的CSS，但没有说明如何根据给定的代码从SCS获得有效的CSS（除了完全废弃它，只编写纯CSS，在这种情况下，为什么有预处理器？）。

li > a::after:hover {
  background-color: rgba(255,128,0,0.5);
}

li {
  > a {
    &::after {
      background-color: rgba(30,30,30,0.6);
    }
    &:hover {
      &::after {
        background-color: rgba(255,128,0,0.5);
      }
    }
  }
}