css - 压缩 CSS 类规则

Question

我有这样的代码:

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

当只有 #header/#footer 不同时，不必列出所有子类/元素，是否可以这样做:

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

Answer 1

是的，有一个 matches 伪类，但如果您希望它能节省您一些输入，它仍然需要您必须复制的供应商前缀，而且支持不是很好。

: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;
}

所以正如您所看到的，它最终比现在仅添加逗号和另一个选择器更加冗长。