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

I feel dumb for having been a web programmer for so long and not knowing the answer to this question, I actually hope it's possible and I just didn't know about rather than what I think is the answer (which is that it's not possible).

我觉得做了这么长时间的网页程序员而不知道这个问题的答案是愚蠢的，我实际上希望这是可能的，我只是不知道而不是我认为的答案(这是不可能的)。

My question is whether it is possible to make a CSS class that "inherits" from another CSS class (or more than one).

我的问题是，是否可能创建一个从另一个CSS类(或多个)“继承”的CSS类。

For example, say we had:

例如，我们有:

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

What I'd like to do is something like this:

我想做的是这样的:

.composite 
{
   .something;
   .else
}

where the ".composite" class would both display inline and have a red background

“.composite”类在哪里既显示内联又显示红色背景

28 个解决方案

#1

370

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

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

Less calls these "Mixins"

少称这些“混合”

Instead of

而不是

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

You could say

你可能会说

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

#2

249

You can add multiple classes to a single DOM element, e.g.

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

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

Inheritance is not part of the CSS standard.

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

#3

Yes, but not exactly with that syntax.

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

#4

An element can take multiple classes:

元素可以有多个类:

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

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

And that's about as close as you're going to get unfortunately. I'd love to see this feature, along with class-aliases someday.

这是很不幸的。我很希望有一天能看到这一特性，以及类别名。

#5

Keep your common attributes together and assign specific (or override) attributes again.

将公共属性放在一起，再次分配特定(或覆盖)属性。

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

#6

No you can't do something like

不，你不能做这样的事。

.composite 
{
   .something;
   .else
}

This are no "class" names in the OO sense. .something and .else are just selectors nothing more.

在OO的意义上，这不是“类”名称。.something和.else只是选择符而已。

But you can either specify two classes on an element

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

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

or you might look into another form of inheritance

或者你可以研究另一种继承形式

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

Where the paragraphs backgroundcolor and color are inherited from the settings in the enclosing div which is .foo styled. You might have to check the exact W3C specification. inherit is default for most properties anyway but not for all.

其中段落背景颜色和颜色继承自包含在.foo样式的div中的设置。您可能需要检查确切的W3C规范。继承是大多数属性的默认值，但不是所有属性的默认值。

#7

I ran into this same problem and ended up using a JQuery solution to make it seem like a class can inherit other classes.

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

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

This will find all elements with the class "composite" and add the classes "something" and "else" to the elements. So something like <div class="composite">...</div> will end up like so:
<div class="composite something else">...</div>

这将找到类“composite”的所有元素，并将类“something”和“else”添加到元素中。比如

…

将会这样结束:

…

。

#8

The SCSS way for the given example, would be something like:

对于给定的示例，SCSS的方式如下:

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

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

More info, check the sass basics

更多信息，请查看sass基础

#9

Don't forget:

不要忘记:

div.something.else {

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

}

#10

In Css file:

在Css文件:

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

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

#11

The best you can do is this

你能做的最好的就是这个

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>

#12

Perfect timing: I went from this question to my email, to find an article about Less, a Ruby library that among other things does this:

完美的时机:我从这个问题转到我的电子邮件，找到了一篇关于Less的文章，一个Ruby库，它可以做以下事情:

Since super looks just like footer, but with a different font, I'll use Less's class inclusion technique (they call it a mixin) to tell it to include these declarations too:

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

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

#13

I realize this question is now very old but, here goes nothin!

我知道这个问题现在已经很老了，但是，这里什么都没有!

If the intent is to add a single class that implies the properties of multiple classes, as a native solution, I would recommend using JavaScript/jQuery (jQuery is really not necessary but certainly useful)

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

If you have, for instance .umbrellaClass that "inherits" from .baseClass1 and .baseClass2 you could have some JavaScript that fires on ready.

例如，如果您有“继承”来自. baseclass1和. baseclass2的伞类，您就可以拥有一些可以随时触发的JavaScript。

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

Now all elements of .umbrellaClass will have all the properties of both .baseClasss. Note that, like OOP inheritance, .umbrellaClass may or may not have its own properties.

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

The only caveat here is to consider whether there are elements being dynamically created that won't exist when this code fires, but there are simple ways around that as well.

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

Sucks css doesn't have native inheritance, though.

但是，Sucks css没有原生继承性。

#14

Unfortunately, CSS does not provide 'inheritance' in the way that programming languages like C++, C# or Java do. You can't declare a CSS class an then extend it with another CSS class.

不幸的是，CSS不像c++、c#或Java那样提供“继承”。你不能声明一个CSS类an然后用另一个CSS类扩展它。

However, you can apply more than a single class to an tag in your markup ... in which case there is a sophisticated set of rules that determine which actual styles will get applied by the browser.

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

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

CSS will look for all the styles that can be applied based on what your markup, and combine the CSS styles from those multiple rules together.

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

Typically, the styles are merged, but when conflicts arise, the later declared style will generally win (unless the !important attribute is specified on one of the styles, in which case that wins). Also, styles applied directly to an HTML element take precedence over CSS class styles.

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

#15

You can apply more than one CSS class to an element by something like this class="something else"

可以对元素应用多个CSS类，比如class="something else"

#16

As others have said, you can add multiple classes to an element.

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

But that's not really the point. I get your question about inheritance. The real point is that inheritance in CSS is done not through classes, but through element hierarchies. So to model inherited traits you need to apply them to different levels of elements in the DOM.

但这并不是重点。我知道你关于遗产的问题。关键是CSS中的继承不是通过类来实现的，而是通过元素层次结构来实现的。因此，要对继承的特性建模，您需要将它们应用到DOM中不同级别的元素。

#17

There's also SASS, which you can find at http://sass-lang.com/. There's an @extend tag, as well as a mix-in type system. (Ruby)

还有SASS，你可以在http://sass-lang.com/上找到。有一个@extend标记，以及一个混合类型系统。(Ruby)

It's kind of a competitor to LESS.

它是更少的竞争对手。

#18

That's not possible in CSS.

这在CSS中是不可能的。

The only thing supported in CSS is being more specific than another rule:

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

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

A span with class "myclass" will have both properties.

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

Another way is by specifying two classes:

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

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

The style of "else" will override (or add) the style of "something"

“else”的样式将覆盖(或添加)“something”的样式

#19

I was looking for that like crazy too and I just figured it out by trying different things :P... Well you can do it like that:

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

composite.something, composite.else
{
    blblalba
}

It suddenly worked for me :)

它突然对我起了作用:)

#20

Actually what you're asking for exists - however it's done as add-on modules. Check out this question on Better CSS in .NET for examples.

实际上，您所要求的是存在的——但是它是作为附加模块完成的。在。net中查看这个关于更好CSS的问题。

Check out Larsenal's answer on using LESS to get an idea of what these add-ons do.

看看Larsenal的回答，用更少的东西来了解这些附加组件的功能。

#21

CSS doesn't really do what you're asking. If you want to write rules with that composite idea in mind, you may want to check out compass. It's a stylesheet framework which looks similar to the already mentioned Less.

CSS并不像你要求的那样。如果你想要在头脑中写出复合思想的规则，你可能想要看看指南针。它是一个样式表框架，看起来与前面提到的不太相似。

It lets you do mixins and all that good business.

它能让你做混合饮料和所有的好生意。

#22

For those who are not satisfied with the mentioned (excellent) posts, you can use your programming skills to make a variable (PHP or whichever) and have it store the multiple class names.

对于那些对上述(优秀)文章不满意的人，您可以使用您的编程技能来创建一个变量(PHP或其他)，并让它存储多个类名。

That's the best hack I could come up with.

这是我能想到的最好的办法。

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

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

Then apply the global variable to the element you desire rather than the class names themselves

然后将全局变量应用到所需的元素，而不是类名本身

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

#23

In specific circumstances you can do a "soft" inheritance:

在特定的情况下，你可以做“软”继承:

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

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

This only works if you are adding the .composite class to a child element. It is "soft" inheritance because any values not specified in .composite are not inherited obviously. Keep in mind it would still be less characters to simply write "inline" and "red" instead of "inherit".

这只适用于将.composite类添加到子元素的情况。它是“软”继承，因为.composite中没有指定的任何值显然不会被继承。记住，简单地写“内联”和“红色”而不是“继承”仍然是比较少的字符。

Here is a list of properties and whether or not they do this automatically: https://www.w3.org/TR/CSS21/propidx.html

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

#24

While direct inheritance isn't possible.

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

It is possible to use a class (or id) for a parent tag and then use CSS combinators to alter child tag behaviour from it's heirarchy.

可以为父标记使用类(或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).

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

#25

If you want a more powerful text preprocessor than LESS, check out PPWizard:

如果你想要一个功能更强大的文本预处理器，请查看PPWizard:

http://dennisbareis.com/ppwizard.htm

Warning the website is truly hideous and there's a small learning curve, but it's perfect for building both CSS and HTML code via macros. I've never understood why more web coders don't use it.

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

#26

You can achieve inheritance-like behavior in this way:

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

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

See http://jsfiddle.net/qj76455e/1/

参见http://jsfiddle.net/qj76455e/1/

The biggest advantage of this approach is modularity - you do not create dependences among classes (as you do when you "inherit" a class using a preprocessor). So any change request regarding CSS does not require any big impact analysis.

这种方法的最大优点是模块化——您不会在类之间创建依赖性(就像您使用预处理器“继承”类时所做的那样)。因此任何关于CSS的变更请求都不需要任何大的影响分析。

#27

Less and Sass are CSS pre-processors which extend CSS language in valuable ways. Just one of many improvements they offer is just the option you're looking for. There are some very good answers with Less and I will add Sass solution.

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

Sass has extend option which allows one class to be fully extended to another one. More about extend you can read in this article

Sass的扩展选项允许一个类完全扩展到另一个类。有关扩展的更多信息，请参阅本文

#28

-6

You can achieve what you want if you preprocess your .css files through php. ...

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

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

...

…

#1

370