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

Question

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

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

Answer 1

为了使 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 元素相关的 styles。 在这种情况下，我将使用第二种表示法，因为父 A 样式容器将包含更多不同的 A 相关 styles。 这将是一个例子：

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.
    }
}

Answer 2

首先，选择器a:hover,:visited的第二部分实际上意味着：

*:visited { ... }

所以它不仅适用a标签，而且适用于所有标签（尽管我认为没有任何其他visited可以应用）

回到问题，我总是将规则分组如下：

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

...而且效果很好