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

Question

设置链接样式时，多次使用 pseudos 看起来有点丑陋且耗时。这在样式链接时是否可能，或者有比这更简单和好看的方法吗？例如：

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 元素相关的其他样式。在这种情况下，我会使用第二种表示法，因为父 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.
    }
}

Answer 2

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

*:visited { ... }

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

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

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

...而且效果很好

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

Is it possible to code multiple pseudos in one curly bracket in css?

css

href