CSSinheritance
说我有这样一个div ，将具有所有相同的属性与背景图像或类似的东西：
div.someBaseDiv { margin-top:3px; margin-left:auto; margin-right:auto; margin-bottom:0px; }
我想要像这样inheritance它：
div.someBaseDiv someInheritedDiv { background-image:url("images/worldsource/customBackground.gif"); background-repeat:no-repeat; width:950px; height:572px; }
当然，我很确定这是写错了，我不害怕寻求帮助，所以有人可以告诉我如何使这项工作，并包括HTML标记？
最简单的方法就是将someInheritedDiv元素添加到第一个规则中。
div.someBaseDiv, #someInheritedDiv { margin-top:3px; margin-left:auto; margin-right:auto; margin-bottom:0px; }
这会告诉你的#someInheritedDiv应用与div.someBaseDiv一样的风格。 然后，将这组样式扩展到更具体的#someInheritedDiv：
#someInheritedDiv { background-image:url("images/worldsource/customBackground.gif"); background-repeat:no-repeat; width:950px; height:572px; }
这是如何特异性在CSS的作品。
使用这两个类并将它们组合如下：
.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; }
标记如下：
<div class="baseClass otherClass"></div>
现在，以这种方式，你可以覆盖baseClass，如果需要的话…因为你不必继续添加你的新类名到baseClass定义，它有点干净。
对于这个任务，我build议你使用CSS的一个强大的扩展名LESS 。 它编译成CSS或可以使用一个JavaScript文件的dynamic链接解释。
如你所描述的，LESS支持（几乎）inheritance。 文档有详细信息（请参阅“Mixins”一节）。
举例来说，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; }
请注意，它必须是.someBaseDiv而不是div.someBaseDiv
你想要做的是使一些CSS适用于两种不同types的元素，但也允许它们有一些差异。 你可以使用一些简单的HTML来做到这一点：
<div class="base"> <div class"inherited"> </div> </div>
和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; }
这将共享属性添加到这两种types的div ，但具体的只有派生div
这真的取决于你的标记。 如果你的inheritance元素位于具有类someBasDiv的div下，那么它的所有子元素将自动inheritance这些属性。
然而，如果你想在你的标记中的任何地方inheritancesomeBaseDiv类，你可以使你想要inheritance的元素，使用这两个类：
<div class="someBaseDiv someInheritedDiv">
和你的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; }
如果您希望所有具有特定类的内部DIV从基类inheritance，则可以像这样构buildHTML标记：
<div class="parent"> <div class="child">X</div> </div>
和CSS
.parent { border: 2px solid red; color: white } .parent .child { background: black }
如果所有DIV都必须inheritance更改.child到div 。
在jsFiddle上看到这个例子
下面的代码
// parent // all DIVs inside the parent .someClass div { }
意思是：具有类someClass顶层元素（任何）将把样式添加到所有的子DIV（recursion地）。
