具有相同父类的逗号分隔元素的 CSS 简写？

Question

我试图让同一个父元素的几个（但不是全部）元素具有相同的样式。

.red p, .red a, .red h3, .red button { color: red; }

<div class="red">
  <p></p>
  <a></a>
  <h3></h3>
  <button></button>
</div>

有没有比这更短的方法 .red p, .red a, .red h3, .red button { color: red; }吗？

类似的东西 .red [p, a, h3, button]（不起作用）的东西？

谢谢

Answer 1

的:is伪选择器（以前称为:matches或:any）是部分选择等级4 CSS规范草案：

.red :is(p, a, h3, button) {
  color: red;
  cursor: pointer;
}

使用前缀的浏览器部分支持它：

.red :is(p, a, h3, button) {
  color: red;
  cursor: pointer;
}

.red :-webkit-any(p, a, h3, button) {
  color: red;
}

.red :-moz-any(p, a, h3, button) {
  color: red;
}

.red :matches(p, a, h3, button) {
  color: red;
}

.red :is(p, a, h3, button) {
  color: red;
}