一个元素可以包含多个类：

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

不幸的是，这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。

您可以向单个DOM元素添加多个类，例如。

<div class="firstClass secondClass thirdclass fourthclass"></div>

后面的类（或更具体的类）中给出的规则将覆盖。所以这个例子中的第四类占了上风。

继承不是CSS标准的一部分。

完美的时机：我从这个问题转到了我的电子邮件，找到了一篇关于Less的文章，这是一个Ruby库，除其他外，它还做了以下工作：

由于super看起来就像页脚，但字体不同，所以我将使用Less的类包含技术（他们称之为mixin）来告诉它也包含这些声明：

#super {
  #footer;
  font-family: cursive;
}

这在CSS中是不可能的。

CSS中唯一支持的是比另一条规则更具体：

span { display:inline }
span.myclass { background: red }

类为“myclass”的span将同时具有这两个财产。

另一种方法是指定两个类：

<div class="something else">...</div>

“else”的样式将覆盖（或添加）“something”的样式

有一些类似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;
}

正如其他人所说，您可以向一个元素添加多个类。

但这不是真正的重点。我明白你关于遗产的问题。真正的问题是CSS中的继承不是通过类来实现的，而是通过元素层次结构来实现的。因此，要对继承的特性进行建模，需要将它们应用于DOM中不同级别的元素。

不，你不能这样做

.composite 
{
   .something;
   .else
}

这不是OO意义上的“类”名称。something和.else只是选择器而已。

但是您可以在一个元素上指定两个类

<div class="something else">...</div>

或者你可以研究另一种形式的继承

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

其中段落背景颜色和颜色继承自封闭div中的设置，该div为.foo样式。您可能需要检查确切的W3C规范。无论如何，inherit是大多数财产的默认值，但不是所有属性的默认值。

在Css文件中：

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

不幸的是，CSS不像C++、C#或Java等编程语言那样提供“继承”。您不能声明一个CSS类，然后用另一个CSS扩展它。

但是，您可以将多个类应用于标记中的标记。。。在这种情况下，有一组复杂的规则来确定浏览器将应用哪些实际样式。

<span class="styleA styleB"> ... </span>

CSS将根据标记查找可应用的所有样式，并将这些多个规则中的CSS样式组合在一起。

通常，会合并样式，但当出现冲突时，通常会以稍后声明的样式获胜（除非在其中一个样式上指定了！important属性，在这种情况下，将获胜）。此外，直接应用于HTML元素的样式优先于CSS类样式。

事实上，你所要求的是存在的——但它是作为附加模块完成的。查看有关.NET中更好的CSS的示例。

查看Larsenal关于使用LESS的回答，了解这些附加组件的功能。

CSS并没有真正做到你所要求的。若你们想在写规则的时候考虑到这个复合的想法，你们可能想看看指南针。这是一个样式表框架，看起来类似于前面提到的Less。

它让你做调酒和所有的好生意。

不要忘记：

div.something.else {

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

}

是的，但不完全符合这个语法。

.composite,
.something { display:inline }

.composite,
.else      { background:red }

如果您想要比LESS更强大的文本预处理器，请查看PPWizard：

http://dennisbareis.com/ppwizard.htm

警告：该网站确实很难看，学习曲线很小，但它非常适合通过宏构建CSS和HTML代码。我一直不明白为什么更多的网络程序员不使用它。

我也在疯狂地寻找它，我只是通过尝试不同的东西来找到它：P。。。你可以这样做：

composite.something, composite.else
{
    blblalba
}

它突然对我奏效了：）

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

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

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

将常用属性放在一起，然后再次指定特定（或覆盖）属性。

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

给定示例的SCSS方式如下：

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

更多信息，请查看sass基础知识

如果通过php对.css文件进行预处理，则可以实现所需的效果。...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

对于那些对上述（优秀）文章不满意的人，您可以使用编程技能创建一个变量（PHP或任何一个），并让它存储多个类名。

这是我能想出的最好的办法。

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

然后将全局变量应用于所需的元素，而不是类名本身

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

你能做的就是这个

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>

在特定情况下，可以执行“软”继承：

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

这仅在将.composite类添加到子元素时有效。它是“软”继承，因为任何未在.composite中指定的值都不会明显继承。请记住，简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。

以下是财产列表，以及它们是否自动执行此操作：https://www.w3.org/TR/CSS21/propidx.html

而直接继承是不可能的。

可以为父标记使用类（或id），然后使用CSS组合符改变子标记的继承行为。

p.test｛背景色：rgba（55,55,55,0.1）；｝p.test>span｛背景色：rgba（55,55,55,0.1）；｝p.test>span>span{背景色：rgba（55,55,55,0.1）；}p.test>span>span>span{背景色：rgba（55,55,55,0.1）；}p.test>span>span>span{背景色：rgba（55,55,55,0.1）；}p.test/span>span>span>span{背景色：rgba（55,55,55,0.1）；}p.test/span>span>span>span>span{背景色：rgba（55,55,55,0.1）；}p.test>span>span>/span>span>span{背景色：rgba（55,55,55,0.1）；}p.test>span>span>span>span>span>span>span{背景色：rgba（55,55,55,0.1）；}<p class=“test”><span>一种可能的<span>解决方案<span>是使用<span>多个<span>嵌套<span>标记</span></span><span></span></span></p>

我不建议像示例那样使用这么多跨度，但这只是概念的证明。当试图以这种方式应用CSS时，仍然会出现许多错误。（例如，更改文本装饰类型）。

我意识到这个问题已经很老了，但是，这里什么都没有！

如果目的是添加一个包含多个类的财产的类作为本机解决方案，我建议使用JavaScript/jQuery（jQuery确实不是必需的，但确实很有用）

例如，如果您有从.baseClass1和.baseClass2“继承”的.bumbellaClass，则可以有一些JavaScript在就绪时启动。

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

现在.umbrellaClass的所有元素都将具有.baseClasss的所有财产。请注意，与OOP继承一样，.umbrellaClass可能有也可能没有自己的财产。

这里唯一需要注意的是，是否有动态创建的元素在代码触发时不存在，但也有简单的方法可以解决。

不过，Sucks css没有原生继承。

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

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

看看CSS合成：https://bambielli.com/til/2017-08-11-css-modules-composes/

根据他们的说法：

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

我在我的反应项目中使用它。

不要将css类视为面向对象的类，将它们视为其他选择器中的一个工具，用于指定html元素的样式。将大括号之间的所有内容视为属性类，左侧的选择器告诉它们选择的元素从属性类继承属性。例子：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

当一个元素被赋予属性class＝“foo”时，最好不要将其看作是从class.foo继承属性，而是从属性class A和属性class B继承属性。也就是说，继承图是一个层次，元素从属性class派生，选择器指定边的位置，以及当存在竞争属性时确定优先级（类似于方法解析顺序）。

编程的实际含义是这样的。假设您有上面给出的样式表，并希望添加一个新的类.baz，其中它应该具有与.foo相同的字体大小。最简单的解决方案是：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

每当我要打两次字时，我都会很生气！我不仅要写两次，现在我没有办法用程序表示.foo和.baz应该具有相同的字体大小，而且我创建了一个隐藏的依赖项！我的上述范例建议我应该从属性类A中抽象出字体大小属性：

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

这里的主要抱怨是，现在我必须再次键入属性类A中的每个选择器，以指定它们应该选择的元素也应该继承属性基类A中的属性。然而，替代方法是，必须记住在每次发生更改时编辑每个存在隐藏依赖项的属性类，或者使用第三方工具。第一个选项让上帝发笑，第二个选项让我想自杀。

我认为这是一个更好的解决方案：

[class*=“button-“] {
  /* base button properties */
}
.button-primary { ... }
.button-plain { ... }

您可以使用相反的方法来实现相同的结果-从复合开始，然后使用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%的未设置关键字支持率下，浏览器覆盖率非常高。