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

有像 LESS 这样的工具，可以让您以类似于您所描述的更高抽象级别来编写 CSS。

Less 称这些为“mixins”

代替

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

---

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

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

后面的类（或更具体的）中给出的规则会覆盖。因此，该示例中的 fourthclass 占了上风。

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

---

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

---

将您的共同属性放在一起并再次分配特定（或覆盖）属性。

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

---

一个元素可以采用多个类：

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

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

不幸的是，这与您将要得到的差不多。我希望有一天能看到这个功能以及类别名。

---

不，你不能做类似的事情

.composite 
{
   .something;
   .else
}

这不是面向对象意义上的“类”名称。 .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>

段落背景颜色和颜色是从 .foo 样式的封闭 div 中的设置继承的。您可能必须检查确切的 W3C 规范。 inherit 是大多数属性的默认值，但不是所有属性。

---

给定示例的 SCSS 方式类似于：

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

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

更多信息，请查看sass basics

---

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

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

这将找到所有具有“复合”类的元素，并将“某物”和“其他”类添加到元素中。所以像 <div class="composite">...</div> 这样的东西最终会像这样：
<div class="composite something else">...</div>

---

你能做的就是这个

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>

---

不要忘记：

div.something.else {

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

}

---

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

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

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

---

在 Css 文件中：

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

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

---

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

如果打算添加一个包含多个类的属性的类，作为本机解决方案，我建议使用 JavaScript/jQuery（jQuery 确实不是必需的，但肯定有用）

例如，如果您有从 .baseClass1 和 .baseClass2“继承”的 .umbrellaClass，那么您可以准备好一些可以触发的 JavaScript。

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

现在 .umbrellaClass 的所有元素都将具有两个 .baseClass 的所有属性。请注意，与 OOP 继承一样，.umbrellaClass 可能有也可能没有自己的属性。

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

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

---

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

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

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

.composite.no-color {
    color: unset
}

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

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

a JSFiddle 演示了这种方法。

这种方法的一个好处是，因为复合选择器的 specificity 高于复合选择器本身，所以您不需要所有的类组合来实现多个组合所需的结果：

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

此外，在 unset 关键字的 96% support 处，浏览器覆盖率非常好。

---

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

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

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

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

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

---

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

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

当一个元素被赋予属性 class="foo" 时，将其视为不是从类 .foo 继承的属性，而是从 属性类 A 和 属性类 B。即，继承图是一层深度，元素来自属性类，选择器指定边的位置，并在存在竞争属性时确定优先级（类似于方法解析顺序）。

https://i.stack.imgur.com/GyXys.png

编程的实际含义是这样的。假设您有上面给出的样式表，并且想要添加一个新类 .baz，它应该具有与 .foo 相同的 font-size。天真的解决方案是这样的：

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

https://i.stack.imgur.com/iHIFf.png

每当我必须输入两次内容时，我都会很生气！我不仅要写两次，而且现在我无法以编程方式指示 .foo 和 .baz 应该具有相同的 font-size，而且我创建了一个隐藏的依赖关系！我的上述范例建议我应该从 attribute class A 中抽象出 font-size 属性：

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

https://i.stack.imgur.com/27RKo.png

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

---

这在 CSS 中是不可能的。

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

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

具有“myclass”类的跨度将具有这两个属性。

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

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

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

---

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

但这不是重点。我得到你关于继承的问题。真正的一点是，CSS 中的继承不是通过类完成的，而是通过元素层次结构完成的。因此，要对继承的特征进行建模，您需要将它们应用于 DOM 中不同级别的元素。

---

虽然直接继承是不可能的。

可以为父标签使用类（或 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 >跨度>跨度{背景颜色：rgba（55,55,55,0.1）；} p.test>跨度>跨度>跨度>跨度>跨度{背景颜色：rgba（55,55,55,0.1）；} p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span > span{背景色：rgba（55,55,55,0.1）；} p.test > 跨度 > 跨度 > 跨度 > 跨度 > 跨度 > 跨度 > 跨度{背景色：rgba（55,55,55,0.1） ;}

一个可能的解决方案是使用多个嵌套标签

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

---

我也在疯狂地寻找它，我只是通过尝试不同的东西来解决这个问题：P......好吧，你可以这样做：

composite.something, composite.else
{
    blblalba
}

它突然对我有用:)

---

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

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

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

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

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

---

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

Sass 有扩展选项，它允许一个类完全扩展到另一个类。有关扩展的更多信息，您可以阅读in this article

---

实际上你所要求的存在 - 但是它是作为附加模块完成的。在 Better CSS in .NET 上查看此问题以获取示例。

查看 Larsenal's answer on using LESS 了解这些插件的作用。

---

CSS 并没有真正做你所要求的。如果您想根据这种复合想法编写规则，您可能需要查看 compass。这是一个样式表框架，看起来类似于已经提到的 Less。

它可以让你做 mixins 和所有的好生意。

---

对于那些对提到的（优秀的）帖子不满意的人，您可以使用您的编程技能制作一个变量（PHP 或其他）并让它存储多个类名。

这是我能想出的最好的技巧。

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

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

然后将全局变量应用于您想要的元素而不是类名本身

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

---

查看 CSS compose：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;
}

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

---

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

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

---

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

http://dennisbareis.com/ppwizard.htm

警告该网站真的很可怕，而且学习曲线很小，但它非常适合通过宏构建 CSS 和 HTML 代码。我一直不明白为什么更多的网络编码人员不使用它。

---

如果你通过 php 预处理你的 .css 文件，你可以实现你想要的。 ...

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

...

---