如何让一个元素为另一个元素继承一组 CSS 规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6377029/
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
How to make an element inherit a set of CSS rules for another element?
提问by jazzBox
Say I have a <div>like this that is going to have all of the same properties with a background image or something like that:
假设我有一个<div>这样的，它将具有背景图像或类似的所有相同属性：
div.someBaseDiv {
margin-top: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
And I wanted to inherit from it like this:
我想像这样继承它：
div.someBaseDiv someInheritedDiv {
background-image: url("images/worldsource/customBackground.gif");
background-repeat: no-repeat;
width: 950px;
height: 572px;
}
Of course I'm pretty sure this is written wrong, and I'm not afraid to ask for help, so can someone tell me how to make this work and include the HTML markup?
当然，我很确定这是写错的，而且我不怕寻求帮助，所以有人可以告诉我如何进行这项工作并包含 HTML 标记吗？
回答by spliter
The easiest is to add your someInheritedDiv element to the first rule like this.
最简单的方法是像这样将 someInheritedDiv 元素添加到第一条规则中。
div.someBaseDiv,
#someInheritedDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extendthis set of styles with more specific to your #someInheritedDiv:
这将告诉您的 #someInheritedDiv 应用与 div.someBaseDiv 相同的样式。然后你扩展这组样式更具体到你的#someInheritedDiv：
#someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This is how specificityin CSS works.
这就是CSS 中的特异性的工作原理。
回答by canon
Use both classes and combine them like so:
使用这两个类并像这样组合它们：
.baseClass
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.baseClass.otherClass /* this means the element has both baseClass and otherClass */
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
The markup is as follows:
标记如下：
<div class="baseClass otherClass"></div>
Now, in this fashion you can override baseClass if necessary... and since you don't have to keep adding your new class names to the baseClass definition, it's a bit cleaner.
现在，以这种方式，您可以在必要时覆盖 baseClass ……并且由于您不必继续将新类名添加到 baseClass 定义中，因此它更简洁一些。
回答by Alan Turing
For this task, I would recommend you use a powerful extension of CSS called LESS. It compiles into CSS or can be used on-the-fly with a javascript file as the link explains.
对于此任务，我建议您使用名为LESS的强大 CSS 扩展。它编译成 CSS 或可以与链接解释的 javascript 文件即时使用。
LESS supports inheritance (almost) as you describe. The documentationhas the details (see the section "Mixins").
LESS 支持（几乎）您描述的继承。该文件有详细资料（请参见“混入”）。
For your example, the LESS code would be:
对于您的示例，LESS 代码将是：
.someBaseDiv {
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
someInheritedDiv {
.someBaseDiv;
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
Note that it would have to be .someBaseDivand not div.someBaseDiv
请注意，它必须是.someBaseDiv而不是div.someBaseDiv
回答by Kyle Sletten
What you want to do is make some CSS apply to two different types of elements, but allow them to have some differences as well. You can do this using some simple HTML:
你想要做的是让一些 CSS 应用于两种不同类型的元素，但也允许它们有一些差异。你可以使用一些简单的 HTML 来做到这一点：
<div class="base">
<div class"inherited">
</div>
</div>
And CSS:
和 CSS：
.base, .inherited{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.inherited{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This will add the shared properties to both types of div, but specific ones only to derived divs
这会将共享属性添加到两种类型的div，但特定的仅添加到派生的divs
回答by Niklas
That really depends on your markup. If your inherited element resides under a div with class someBasDiv, then all child elements of it will automatically inherit those properties.
这真的取决于你的标记。如果您继承的元素位于具有 class 的 div 下someBasDiv，那么它的所有子元素将自动继承这些属性。
If however, you want to inherit the someBaseDivclass in any place in your markup, you could just make the element which you want to inherit with, use both of those classes like this:
但是，如果您想someBaseDiv在标记中的任何位置继承该类，您可以只制作要继承的元素，使用这两个类，如下所示：
<div class="someBaseDiv someInheritedDiv">
and your css would be like this:
你的css会是这样的：
div.someBaseDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
div.someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
回答by BrunoLM
If you want all the inner DIVs with a specific class to inherit from the base class build the HTML markup like this:
如果您希望具有特定类的所有内部 DIV 从基类继承，请构建 HTML 标记，如下所示：
<div class="parent">
<div class="child">X</div>
</div>
And the CSS
和 CSS
.parent { border: 2px solid red; color: white }
.parent .child { background: black }
If all DIVs must inherit change .childto div.
如果所有 DIV 都必须继承更改.child为div.
The following code
以下代码
// parent // all DIVs inside the parent
.someClass div { }
Means: A top element (any) with the class someClasswill add the styles to all its children DIVs (recursively).
意味着：具有该类的顶级元素（任何）someClass将向其所有子 DIV（递归）添加样式。
