压缩CSS类规则

Question

我的代码如下：

#header button active:hover, #footer button active:hover {
    color: purple;
}

当只有#header/#footer不同时，不必列出所有子类/元素，是否可以执行以下操作：

(#header|#footer) button active:hover {
    color: purple;
}

Answer 1

是的，这是一个匹配伪类，但是如果你希望它能为你节省一些打字，它仍然需要供应商前缀，你必须复制，支持并不是很好。

:matches(#header, #footer) button active:hover {
  color: purple;
}
:-webkit-any(#header, #footer) button active:hover {
  color: purple;
}
:-moz-any(#header, #footer) button active:hover {
  color: purple;
}

因此，您可以看到它最终比仅添加逗号和另一个选择器更加冗长。