CSS 类可以继承一个或多个其他类吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1065435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a CSS class inherit one or more other classes?
提问by Joel Martinez
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”类将内联显示并具有红色背景
采纳答案by Larsenal
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"
Less 称这些为“混合”
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;
}
回答by Matt Bridges
You can add multiple classes to a single DOM element, e.g.
您可以将多个类添加到单个 DOM 元素，例如
<div class="firstClass secondClass thirdclass fourthclass"></div>
Rules given in later classes (or which are more specific) override. So the fourthclassin that example kind of prevails.
后面的类（或更具体的）中给出的规则覆盖。所以fourthclass在那个例子中占了上风。
Inheritance is not part of the CSS standard.
继承不是 CSS 标准的一部分。
回答by mlouro
Yes, but not exactly with that syntax.
是的，但不完全是那种语法。
.composite,
.something { display:inline }
.composite,
.else { background:red }
回答by user2990362
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;
}
回答by Sampson
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.
不幸的是，这与您将要得到的差不多。我希望有一天能看到这个特性，以及类别名。
回答by jitter
No you can't do something like
不，你不能做类似的事情
.composite
{
.something;
.else
}
This are no "class" names in the OO sense. .somethingand .elseare just selectors nothing more.
这不是面向对象意义上的“类”名称。.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 .foostyled. You might have to check the exact W3C specification. inheritis default for most properties anyway but not for all.
其中段落背景颜色和颜色是从带.foo样式的封闭 div 中的设置继承而来的。您可能需要检查确切的 W3C 规范。inherit无论如何都是大多数属性的默认值，但不是所有属性。
回答by DHoover
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”类添加到元素中。所以类似的事情<div class="composite">...</div>最终会像这样：<div class="composite something else">...</div>
回答by Alter Lagos
The SCSSway 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基础知识
回答by electricalbah
The best you can do is this
你能做的最好的就是这个
CSS
CSS
.car {
font-weight: bold;
}
.benz {
background-color: blue;
}
.toyota {
background-color: white;
}
HTML
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>
回答by Ryan Florence
Don't forget:
不要忘记：
div.something.else {
// will only style a div with both, not just one or the other
}
