选择具有相同属性的多个类答案

【问题标题】：Select multiple classes with same property选择具有相同属性的多个类
【发布时间】：2016-07-14 08:59:24
【问题描述】：

我有多个这样的类具有相同的属性：

.class1 > div{
  background-color: red;
}

我尝试通过以下方式减少 CSS 代码：

.class1, .class2, .class3 > div{
  background-color: red;
}

但它不能正常工作，在这种情况下它只需要最后一个类.class3。

有没有办法正确地做到这一点？

【问题讨论】：

我已经完成了answer 的所有详细信息，希望对您有所帮助。

标签： css css-selectors

【解决方案1】：

如果您希望为每个类选择子 div，则需要使用每个类的选择器指定它，如下所示：

CSS

.class1 > div, .class2 > div, .class3 > div {
  background-color: red !important;
}

Single Selector (Wrong)

Selector For Each Class (Right)

【讨论】：

啊，我想我可以逃脱，感谢您的快速回复 Hunter
@michellompret，没问题！很高兴帮助:)

【解决方案2】：

您将能够在 CSS 选择器级别 4 中使用 :matches 伪类。

:matches(.class1, .class2, .class3) > div {
  ...
}

它目前仅适用于某些浏览器，例如最新的 Apple Safari。

现在，您将不得不在 Firefox 和 Chrome 中使用 old 语法 :any 和它们各自的前缀。在 IE 和 Edge 中不受支持。

:-moz-any(.class1, .class2, .class3) > div { ... }
:-webkit-any(.class1, .class2, .class3) > div { ... }

:-moz-any(.class1, .class2, .class3) > div {
  background: aqua;
}
:-webkit-any(.class1, .class2, .class3) > div {
  background: aqua;
}
:matches(.class1, .class2, .class3) > div {
  background: aqua;
}

<div class="class1"><div>1</div></div>
<div class="class2"><div>2</div></div>
<div class="class3"><div>3</div></div>
<div class="class4"><div>4</div></div>
<div class="class5"><div>5</div></div>

希望标准:matches 将在不久的将来在所有主要浏览器中可用。除此之外，请为每个选择器编写完整的选择器，并用逗号分隔它们：

.class1 > div,
.class2 > div,
.class3 > div {
  ...
}

参考资料：

【讨论】：