如何使一个元素继承另一个元素的一组CSS规则？

假设我有一个像这样的

，它将具有与背景图像或类似内容相同的所有属性：

div.someBaseDiv{
利润上限：3倍；
左边距：自动；
右边距：自动；
边缘底部：0px；
}

我想这样继承它：

<div class="someBaseDiv someInheritedDiv">

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 class="parent">
    <div class="child">X</div>
</div>

div.someBaseDiv someInheritedDiv{
背景图片：url（“images/worldsource/customBackground.gif”）；
背景重复：无重复；
宽度：950px；
高度：572像素；
}

---

当然，我很确定这是写错的，我不怕寻求帮助，所以有人能告诉我如何做到这一点并包含HTML标记吗？

这取决于你的标记。如果继承的元素位于类为

someBasDiv

的div下，那么它的所有子元素都将自动继承这些属性

但是，如果您想在标记中的任何位置继承

someBaseDiv

类，您只需创建要继承的元素，使用这两个类，如下所示：

<div class="someBaseDiv someInheritedDiv">

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 class="parent">
    <div class="child">X</div>
</div>

---

对于这个任务，我建议您使用一个强大的CSS扩展名为。正如链接所解释的，它可以编译成CSS，也可以动态地与javascript文件一起使用

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应用于两种不同类型的元素，但也允许它们有一些差异。您可以使用一些简单的HTML：

<div class="base">
    <div class"inherited">
    </div>
</div>

---

这会将共享属性添加到这两种类型的

div

，但特定属性仅用于派生的

div

s

使用这两个类并将它们像这样组合：

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

---

现在，以这种方式，如果需要，您可以重写基类。。。而且，由于不必不断将新类名添加到基类定义中，因此会更简洁。

如果希望所有具有特定类的内部div从基类继承，请按如下方式构建HTML标记：

<div class="someBaseDiv someInheritedDiv">

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 class="parent">
    <div class="child">X</div>
</div>

如果所有div必须继承，则将

.child

更改为

div

下面的代码

// parent     // all DIVs inside the parent
.someClass    div { }

---

意思是：带有类

someClass

的顶部元素（any）将向其所有子div（递归）添加样式。

最简单的方法是向第一个规则添加someInheritedDiv元素，如下所示

div.someBaseDiv，
#萨默雷迪夫
{
利润上限：3倍；
左边距：自动；
右边距：自动；
边缘底部：0px；
}

这将告诉您的#someInheritedDiv应用与div.someBaseDiv相同的样式。然后，您可以针对您的#someInheritedDiv扩展这组样式：

\someInheritedDiv
{
背景图片：url（“images/worldsource/customBackground.gif”）；
背景重复：无重复；
宽度：950px；
高度：572像素；
}

---

这就是CSS中的特异性的工作原理。

我不知道你想做什么？这是一个选择器“div.someBaseDiv someinhertediv”。这与继承无关。选择器“someinhertediv”的最后一部分，我也不知道那是什么。CSS继承意味着在父/祖先元素上设置的一些但不是所有属性都由子/祖先元素继承。例如，如果您有一个div元素，例如样式为“color:blue”的div#parent，并且该div#parent包含另一个div，例如div#child，那么div#child也将获得样式为“color:blue”的div#parent；您可能会将inhertenance与“someinhertediv”混淆。如上所述，并非所有属性都是继承的，只有一些属性是继承的，例如颜色、字体大小、字体大小等。您可以将HTML作为“我是父母我是孩子”，将CSS作为“div#parent{color:blue；}”，现在div#child也将使用蓝色。这就是CSS继承的作用。请注意–LESS根本不是CSS的扩展。它是一个用Javascript编写的预处理器。