您可以使用相反的方法来实现相同的结果-从复合开始，然后使用unset关键字删除样式。例如，如果从以下示例组成开始：

.composite {
    color: red;
    margin-left: 50px;
    background-color: green
}

然后可以增加选择器的特异性，以使用unset选择性地删除样式：

.composite.no-color {
    color: unset
}

.composite.no-margin-left {
    margin-left: unset
}

.composite.no-background-color {
    background-color: unset
}

这里有一个JSFiddle演示了这种方法。

这种方法的一个好处是，由于复合选择器的特异性高于复合选择器本身，因此不需要所有类的组合来实现多个组合的预期结果：

/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
    background-color: unset;
    color: unset;
    margin-left: unset
}

此外，在96%的未设置关键字支持率下，浏览器覆盖率非常高。

你能做的就是这个

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案，我将添加Sass解决方案。

Sass具有扩展选项，允许一个类完全扩展到另一个类。有关扩展的更多信息，请参阅本文

不要忘记：

div.something.else {

    // will only style a div with both, not just one or the other

}

有一些类似LESS的工具，它允许您在类似于所描述的更高抽象级别上编写CSS。

更少的人称这些为“混合”

而不是

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

你可以说

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

我遇到了同样的问题，最后使用了JQuery解决方案，使类看起来可以继承其他类。

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

这将查找具有类“composite”的所有元素，并将类“something”和“else”添加到元素中。所以类似于＜div class=“composite”＞</div>将这样结束：＜div class=“composite something other”＞</分区>