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

我作为一个网络程序员已经这么长时间了，而且不知道这个问题的答案，这让我感到很愚蠢。我实际上希望这是可能的，我只是不知道答案，而不是我认为答案是什么（那是不可能的） 。

我的问题是，是否有可能使一个CSS类从另一个CSS类（或多个CSS类）“继承”。

例如，假设我们有：

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

我想做的是这样的：

.composite 
{
   .something;
   .else
}

其中“ .composite”类将同时显示内联并具有红色背景

有像LESS这样的工具，它使您可以像描述的那样在更高的抽象层次上编写CSS。

少称这些为“ 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>

段落backgroundcolor和color继承自带有.foo样式的封闭div中的设置。您可能必须检查确切的W3C规范。inherit无论如何，大多数属性都是默认属性，但并非所有属性都是默认属性。

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

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

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

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

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

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

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

你能做的最好的就是这个

的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

}

在Css文件中：

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

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

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

如果目的是添加一个包含多个类的属性的类，作为本机解决方案，则建议使用JavaScript / jQuery（jQuery并非必需，但肯定有用）

如果你有，比如.umbrellaClass那“继承”从.baseClass1和.baseClass2你可以有一些JavaScript上准备火灾。

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

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

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

不过，Sucks CSS没有本地继承。

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

由于 super 看起来像 footer，但是使用不同的字体，因此我将使用Less的类包含技术（他们称其为mixin）来告诉它也包含以下声明：

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

不幸的是，CSS没有像C ++，C＃或Java这样的编程语言那样提供“继承性”。您不能声明一个CSS类，然后再使用另一个CSS类对其进行扩展。

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

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

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

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

还有SASS，您可以在http://sass-lang.com/上找到。有一个@extend标记以及一个混合类型系统。（红宝石）

这是LESS的竞争对手。

这在CSS中是不可能的。

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

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

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

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

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

“其他”样式将覆盖（或添加）“某物”样式

您可以通过此类class =“ something else”将多个CSS类应用于一个元素

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

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

我也正在寻找疯狂的东西，我只是通过尝试不同的方法来解决它：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

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

可以为父标记使用一个类（或id），然后使用CSS组合器从其层次结构更改子标记的行为。

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color: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{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

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

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

Sass具有扩展选项，该选项允许将一个类完全扩展到另一类。您可以在本文中阅读有关扩展的更多信息

实际上，您要的内容存在-但是它作为附加模块完成。在.NET中检查有关更好CSS的问题获取示例。

查看Larsenal关于使用LESS的答案，以了解这些插件的功能。

CSS并没有真正做什么你问。如果您想在编写规则时考虑到该综合构想，则可能需要查看罗盘。这是一个样式表框架，看起来与已经提到的Less相似。

它使您可以进行混合以及所有出色的业务。

对于那些对上述（优秀）帖子不满意的人，您可以使用您的编程技能来制作变量（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;
}

我在我的React项目中使用它。

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

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

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

编程的实际含义是这样。假设你有上面给出的样式表，并要添加一个新的类.baz，它应该具有相同font-size的.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应该具有相同的含义font-size，而且我创建了一个隐藏的依赖项！ 我的上述范例建议我应该font-size从属性类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中的属性。尽管如此，替代方案还是必须记住在每次发生更改时都编辑存在隐藏依赖性的每个属性类，或者使用第三方工具。第一种选择使上帝发笑，第二种选择使我想自杀。

如果您需要比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 '}';

...