css - 如何让一个元素继承另一个元素的一套CSS规则？

Question

假设我有一个 <div>像这样将具有所有相同的属性和背景图像或类似的东西:

div.someBaseDiv {
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

我想像这样继承它:

div.someBaseDiv someInheritedDiv {
    background-image: url("images/worldsource/customBackground.gif");
    background-repeat: no-repeat;
    width: 950px;
    height: 572px;
}

当然，我很确定这是写错了，而且我不怕寻求帮助，所以有人可以告诉我如何进行这项工作并包含 HTML 标记吗？

Answer 1

最简单的方法是像这样将 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 中特异性的工作原理。