您可以在 CSS 或 SCSS 中链接 Anchor Pseudo-类 吗？

Question

我正在使用 SCSS，想知道是否有更好的方法来编写这个...

.nav li a:hover, .nav li a:active, .nav li a:visited, .nav li a:focus

如果这样的事情是可能的，我会很高兴...

.nav li a:hover:active:visited:focus

Answer 1

是的，你可以，使用 & 字符：

.nav li a {
    &:hover,
    &:active,
    &:visited,
    &:focus {
    }
}

来自 sass-lang.com:

& will be replaced with the parent selector as it appears in the CSS. This means that if you have a deeply nested rule, the parent selector will be fully resolved before the & is replaced.

Answer 2

SCSS 提供一些帮助

您不能在 CSS 中链接 pseudo-classes，但在嵌套语法中 in SCSS you can reference the parent selector with the &：

.nav li a {
    &:hover,
    &:active,
    &:visited,
    &:focus {
        …
    }
}