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

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

http://dennisbareis.com/ppwizard.htm

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

看看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项目中使用它。

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

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

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

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

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

可以为父标记使用类（或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具有扩展选项，该选项允许将一个类完全扩展到另一类。您可以在本文中了解有关扩展的更多信息

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

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

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

仅当您将.composite类添加到子元素时，此方法才有效。这是“软”继承，因为未显式继承未在.composite中指定的任何值。请记住，只需编写“内联”和“红色”而不是“继承”，字符仍然更少。

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

我也一直在寻找疯狂的东西，我只是通过尝试不同的方法来解决它：P ...那么你可以这样做：

composite.something, composite.else
{
    blblalba
}

它突然为我工作:)

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

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

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

这是LESS的竞争对手。

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

在CSS中是不可能的。

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

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

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

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

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

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

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

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

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

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

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

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

如果目的是添加一个包含多个类的属性的类，作为本机解决方案，我建议使用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文件中：

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

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

不要忘记：

div.something.else {

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

}

我遇到了同样的问题，最终使用了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基础知识

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

不，你不能做类似的事情

.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无论如何，大多数属性都是默认属性，但并非所有属性都是默认属性。

将共同的属性放在一起，然后再次分配特定的（或替代）属性。

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

有像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标准的一部分。