如何重用CSS选择器?

您可以按照中的指定添加带有逗号(,)的附加选择器 W3C selectors grouping

.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>

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

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

在定义中使用逗号分隔的选择器列表:

.foo .bar, .otherSelector, #someID{
    background: red;
}

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

你会用它变魔术吗

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

或者去掉层次结构,只使用

.bar {
     background: red;
}

这两种情况都适用

.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>

“.foo.bar”CSS定义是专门为父子关系(更准确地说是祖先关系)编写的。

您可以这样编写CSS:

.alternate-background {
   background: red;
}

<div>
    <div class="alternate-background">I have a red background</div>
</div>

这将允许您也使用:

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