Question

对于长期担任网络程序员并且不知道这个问题的答案我感到愚蠢，我实际上希望这是可能的，我只是不知道而不是我认为的答案（这是它的不可能）。

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

例如，假设我们有：

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

我想做的是这样的事情：

.composite 
{
   .something;
   .else
}

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

Answer 1

有像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;
}

Answer 2

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

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

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

Answer 3

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Answer 4

将您的公共属性保持在一起并再次指定特定（或覆盖）属性。

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

Answer 5

元素可以包含多个类：

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

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

这就像你不幸的那样接近。我希望有一天能看到这个功能以及类别名。

Answer 6

不，你不能做像

这样的事情

.composite 
{
   .something;
   .else
}

在OO意义上，这不是“类”名称。 <{1}}和.something仅仅是选择器。

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

.else

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

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

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

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

其中段落backgroundcolor和颜色是从<div class="foo"> <p class="bar">Hello, world</p> </div>样式的封闭div中的设置继承而来的。您可能必须检查确切的W3C规范。无论如何，.foo是大多数属性的默认值，但不适用于所有属性。

Answer 7

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

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

这将找到具有“composite”类的所有元素，并将元素“something”和“else”添加到元素中。因此<div class="composite">...</div>之类的内容最终会如此：
<div class="composite something else">...</div>

Answer 8

给定示例的 SCSS 方式如下：

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

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

更多信息，请查看sass basics

Answer 9

你能做的最好的就是这个

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>

Answer 10

不要忘记：

div.something.else {

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

}

Answer 11

在Css文件中：

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

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

Answer 12

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

如果想要添加一个隐含多个类属性的类，作为本机解决方案，我建议使用JavaScript / jQuery（jQuery实际上没有必要，但肯定有用）

例如，如果你有.umbrellaClass来自.baseClass1和.baseClass2的“继承”，那么你就可以拥有一些准备就绪的JavaScript。

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

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

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

Sucks css没有本机继承。

Answer 13

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

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

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

Answer 14

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

这是LESS的竞争对手。

Answer 15

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

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

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

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

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

Answer 16

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

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

Answer 17

这在CSS中是不可能的。

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

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

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

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

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

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

Answer 18

您可以通过类class =“something else”

之类的内容将多个CSS类应用于元素

Answer 19

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

可以将一个类（或id）用于父标记，然后使用CSS组合器来改变子标记行为。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 20

我一直在寻找那种疯狂的东西，我只是想通过尝试不同的东西来解决这个问题：P ......你可以这样做：

composite.something, composite.else
{
    blblalba
}

它突然对我有用：）

Answer 21

在特定情况下，你可以做一个＆＃34; soft＆＃34;继承性：

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

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

仅当您将.composite类添加到子元素时才有效。这是＆＃34;软＆＃34;继承，因为.composite中未指定的任何值都不会显然继承。请记住，只需简单地编写＆＃34; inline＆＃34;和＆＃34;红色＆＃34;而不是＆＃34;继承＆＃34;。

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

Answer 22

对于那些对上述（优秀）帖子不满意的人，你可以使用你的编程技巧来制作变量（PHP或其中任何一个）并让它存储多个类名。

这是我能想到的最好的黑客。

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

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

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

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

Answer 23

CSS并不真正做你所要求的。如果您想编写具有该复合概念的规则，您可能需要查看compass。它是一个样式表框架，看起来类似于已经提到的Less。

它可以让你做混合和所有好事。

Answer 24

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

查看Larsenal's answer on using LESS以了解这些加载项的功能。

Answer 25

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

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

Answer 26

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

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

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

.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处，浏览器的覆盖范围非常好。

Answer 27

您可以通过以下方式实现类似继承的行为：

.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles

请参阅http://jsfiddle.net/qj76455e/1/

这种方法的最大优点是模块化 - 您不会在类之间创建依赖关系（就像使用预处理器“继承”类时一样）。因此，任何有关CSS的变更请求都不需要进行任何重大影响分析。

Answer 28

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

http://dennisbareis.com/ppwizard.htm

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

Answer 29

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

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

Answer 30

不要将CSS 类视为面向对象的类，而应将它们视为其他选择器中的一种工具，用于指定html元素的样式是哪个属性类 。将括号之间的所有内容都视为 attribute类，左侧的选择器告诉他们从 attribute类中选择 inherit 属性的元素 em>。示例：

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

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

编程的实际含义是这样。假设您具有上面给出的样式表，并想添加一个新类.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，并且我创建了 hidden ！我上面的范例建议我应该从属性类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 */}

这里的主要抱怨是，现在我必须重新输入属性类A 中的每个选择器，以指定他们应该选择的元素也应该继承属性基类A 的属性。 em>。尽管如此，替代方案还是要记住，每次发生变化时，都要编辑每个存在隐藏依赖项的 attribute类，或者使用第三方工具。第一种选择使上帝发笑，第二种选择使我想自杀。

Answer 31

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

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

Answer 32

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

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

...

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

32 个答案: