如何重用CSS选择器？

Question

我有以下CSS:

.foo .bar {
   background: red;
}

哪个适用于以下HTML:

<div class="foo">
    <div class="bar">I have a red background</div>
</div>

但是当我不在父/子关系中时,我似乎无法找到重用CSS定义的方法.例如,我如何将相同的CSS应用于以下DIV:

<div class="???">I want a red background!</div>

Answer 1

您可以使用W3C选择器分组中指定的逗号(,)添加其他选择器

.foo .bar, .foobar {
   background: red;
}

这对两者都有效

<div class="foo">
    <div class="bar">I have a red background</div>
</div>

和

<div class="foobar">I want a red background!</div>

Answer 2

您可以使用逗号指示CSS规则应该应用于的多个选择器

.foo .bar, .??? {
   background: red;
}