是否可以在 css 的一个大括号中编写多个伪代码？答案

【问题标题】：Is it possible to code multiple pseudos in one curly bracket in css?是否可以在 css 的一个大括号中编写多个伪代码？
【发布时间】：2021-05-13 02:11:29
【问题描述】：

在为链接设置样式时，多次使用伪代码看起来有点丑陋且耗时。这在样式链接时是否可能，或者有没有比这更容易和好看的方法？例如：

a:hover,:visited {
      ....
}

【问题讨论】：

标签： css href

【解决方案1】：

首先，选择器a:hover,:visited 的第二部分实际上是这个意思：

*:visited { ... }

所以它不仅适用于a标签，也适用于所有标签（虽然我认为visited没有其他标签可以适用）

回到问题，我总是这样分组规则：

a:link, a:visited {
  [settings]
}
a:hover, a:active, a:focus {
  [settings]
}

...而且效果很好

【讨论】：

【解决方案2】：

在 CSS 中保持可读性类似于在任何其他编程语言中编写一长行代码。我倾向于将多个 CSS 选择器分成单独的行，以便它们可读但仍具有相同的样式：

a:hover,
a:visited,
... {
    // your styles
}

但是在任何 CSS 预处理器（即 SCSS）中执行相同操作时，您可以通过其他方式执行此操作，但可能不会比上述更好。

a {
    &:hover,
    &:visited {
        // basically even more verbose
    }
}

甚至可能：

$pseudos: 'hover', 'visited', 'active';
$each $p in $pseudos {
    a:{$p} {
        // same styles but overall even more verbose
    }
}

无论如何我都会坚持第一个。它是最简洁和可读的，除非当然还有其他与通用 A 元素相关的样式。在这种情况下，我将使用第二种表示法，因为父 A 样式容器将包含更多不同的 A 相关样式。这就是一个例子：

a {
    text-decoration: none;
    color: $default;

    &.pop-out:after {
        // just an example, which I'd rather solve using an icon font
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        background-image: url(popout-icon.png);
    }

    &:hover,
    &:visited {
        // pseudo specials go here.
    }
}

【讨论】：