CSS类可以继承一个或多个其他类吗？

我觉得自己很傻，因为我做了这么长时间的网络程序员，却不知道这个问题的答案，我真的希望这是可能的，我只是不知道，而不是我认为答案是什么（这是不可能的）

我的问题是，是否可以创建一个“继承”另一个CSS类（或多个）的CSS类

例如，假设我们有：

.something{display:inline}
.else{背景：红色}

我想做的是这样的：

.composite
{
某物
其他的
}

---

当“.composite”类同时显示内联和红色背景时，元素可以包含多个类：

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

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

.classOne{font-weight:bold；}
.class2{font family:verdana；}
我很勇敢，也很勇敢

---

不幸的是，这是你将得到的最接近的结果。我希望有一天能看到这个特性以及类别名。

您可以将多个类添加到一个DOM元素中，例如

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

在后面的类（或更具体的类）中给出的规则将重写。因此，在这个例子中，第四类占了上风

---

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

完美时机：我从这个问题到我的电子邮件，找到了一篇关于Ruby库的文章，其中包括：

由于

super

看起来就像

footer

，但字体不同，我将使用Less的类包含技术（他们称之为mixin）告诉它也包含这些声明：

#超级{
#页脚；
字体系列：草书；
}

这在CSS中是不可能的

CSS中唯一支持的是比其他规则更具体：

span{display:inline}
span.myclass{背景：红色}

类为“myclass”的范围将同时具有这两个属性

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

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

。。。

“else”的样式将覆盖（或添加）“something”的样式有这样的工具，它们允许您在更高的抽象层次上编写CSS，类似于您所描述的内容

Less称这些为“混合”

而不是

/* CSS */

#标题{
-moz边界半径：8px；
-webkit边界半径：8px；
边界半径：8px；
}
#页脚{
-moz边界半径：8px；
-webkit边界半径：8px；
边界半径：8px；
}

你可以说

/* LESS */

。圆角{
-moz边界半径：8px；
-webkit边界半径：8px；
边界半径：8px；
}
#标题{
.圆角；
}
#页脚{
.圆角；
}

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

---

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

不，您不能这样做

.composite
{
某物
其他的
}

这不是OO意义上的“类”名称<代码>。有些东西和

。其他的

只不过是选择器而已

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

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

你好，世界

其中段落backgroundcolor和color继承自封闭div中的设置，该div为

.foo

样式。您可能需要检查确切的W3C规范<代码>继承是大多数属性的默认值，但不是所有属性的默认值

在Css文件中：

p.Title
{
字体系列：Arial；
字体大小：16px；
}
p、 副标题p.标题
{
字体大小：12px；
}
遗憾的是，CSS并没有像C++、C语言或java那样编程语言提供“继承”。您不能声明一个CSS类，然后用另一个CSS类扩展它

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

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

。。。

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

通常，样式是合并的，但是当发生冲突时，后面声明的样式通常会获胜（除非在其中一个样式上指定了！重要属性，在这种情况下，该属性获胜）。此外，直接应用于HTML元素的样式优先于CSS类样式。
实际上，您要求的样式是存在的，但它是作为附加模块完成的。请查看上的这个问题以获取示例

查看这些附加组件，了解它们的作用。
CSS并不能真正满足您的要求。如果您想在编写规则时考虑到这种复合思想，您可能需要签出。这是一个样式表框架，与前面提到的较少的样式表框架类似

它可以让你进行混音和所有的好生意。
别忘了：

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

.composite，
.something{display:inline}
混合成的
.else{背景：红色}
如果您想要比LESS更强大的文本预处理器，请查看PPWizard：


警告：该网站确实很糟糕，学习曲线很小，但它非常适合通过宏构建CSS和HTML代码。我一直不明白为什么更多的网络程序员不使用它。
我也在疯狂地寻找它，我只是通过尝试不同的东西找到了答案：p。。。你可以这样做：

composite.something，composite.else
{
布莱尔巴
}

它突然对我起了作用：）
我遇到了同样的问题，并最终使用JQuery解决方案使类看起来可以继承其他类

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


$（函数（）{
$（“.composite”）.addClass（“其他东西”）；
});

这将
div.something.else {

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

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

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

.composite.no-color {
    color: unset
}

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

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

/* 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
}