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

是否可以创建一个从另一个CSS类（或多个）“继承”的CSS类。

例如，假设我们有：

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

我想做的是这样的事情：

.composite{.something;.else}

其中“。复合”类将显示内联并具有红色背景

805407 次浏览
小开

一个元素可以有多个类：

.classOne { font-weight: bold; }.classTwo { font-famiy:  verdana; }
<div class="classOne classTwo"><p>I'm bold and verdana.</p></div>

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

小开

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

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

后面的类（或更具体的类）中给出的规则会覆盖。因此，该示例中的fourthclass占主导地位。

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

小开

时间刚刚好：我从这个问题转到我的电子邮件，找到一篇关于更少的文章，一个Ruby库，除其他外，它是这样做的：

自从super看起来就像footer，但使用不同的字体，我将使用Low的类包含技术（他们称之为混合）来告诉它也包含这些声明：

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

这在CSS中是不可能的。

CSS中唯一支持的是比另一个规则更具体：

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

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

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

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

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

小开
最佳答案

有像少这样的工具，它允许您在与您描述的类似的更高抽象级别上编写CSS。

少称这些“混合”

而不是

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

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

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

小开

不，你不能这样做

.composite{.something;.else}

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

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

小开

在css文件中：

p.Title{font-family: Arial;font-size: 16px;}
p.SubTitle p.Title{font-size: 12px;}
小开

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

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

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

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

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

小开

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

查看关于使用LESS的回答以了解这些附加组件的作用。

小开

CSS并没有真正做你所要求的。如果你想用复合的想法来编写规则，你可能想看看指南针。它是一个样式表框架，看起来类似于已经提到的Low。

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

小开

别忘了：

div.something.else {
// will only style a div with both, not just one or the other
}
小开

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

.composite,.something { display:inline }
.composite,.else      { background:red }
小开

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

警告网站真的很可怕，学习曲线很小，但它非常适合通过宏构建CSS和超文本标记语言代码。我一直不明白为什么更多的网络程序员不使用它。

小开

我也在疯狂地寻找它，我只是通过尝试不同的东西来弄清楚：P…你可以这样做：

composite.something, composite.else{blblalba}

它突然为我工作：）

小开

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

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

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

小开

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

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

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

.something {display: inline}.else {background: red}
.composite {@extend .something;@extend .else;}

更多信息，查看sass基础

小开

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

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

…

小开

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

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

<style>.red { color: red; }.bold { font-weight: bold; }</style>
<? define('DANGERTEXT','red bold'); ?>

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

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

你能做的就是这个

css

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

这仅适用于将.复合类添加到子元素的情况。这是“软”继承，因为任何未在.复合中指定的值都不会被明显继承。请记住，简单地写“内联”和“红色”而不是“继承”仍然会少一些字符。

以下是属性列表，以及它们是否会自动执行此操作：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>

I wouldn't suggest using so many spans like the example, however it's just a proof of concept. There are still many bugs that can arise when trying to apply CSS in this manner. (For example altering text-decoration types).

小开

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

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

如果你有，例如.umbrellaClass从.baseClass1和.baseClass2“继承”，你可以有一些随时触发的JavaScript。

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

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

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

不过，糟糕的css没有本机继承。

小开

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

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

小开

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

小开

不要把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，它应该具有与.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! */}

在此处输入图片描述

任何时候我必须输入两次东西，我都很生气！不仅我必须写两次，现在我无法以编程方式指示.foo和.baz应该具有相同的font-size，我创建了一个隐藏的依赖！我上面的范例建议我应该从属性类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的属性。尽管如此，替代方案是必须记住在每次发生变化时编辑每个隐藏依赖项的属性类，或者使用第三方工具。第一个选项让上帝发笑，第二个让我想自杀。

小开

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

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

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

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

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

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

这里是一个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%支持中，浏览器覆盖率非常好。


提交答案