你能在 CSS 或 SCSS 中链接锚伪类吗？答案

【问题标题】：Can you chain Anchor Pseudo-classes in CSS or SCSS?你能在 CSS 或 SCSS 中链接锚伪类吗？
【发布时间】：2016-04-04 22:09:45
【问题描述】：

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

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

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

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

【问题讨论】：

你认为这将如何运作，确切地说？
@cimmanon：简单，一个被悬停、激活和聚焦的访问链接。另一方面，如果你有类似a:link:visited:hover:active:focus 的东西......

【解决方案1】：

SCSS 提供了一些帮助

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

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

【讨论】：

【解决方案2】：

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

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

& 将被替换为父选择器，因为它出现在 CSS 中。这意味着如果你有一个深度嵌套的规则，父选择器将在 & 被替换之前被完全解析。

【讨论】：