tip CSS繼承




title html tag (5)

假設我有一個這樣的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標記嗎?


你想要做的是讓一些CSS適用於兩種不同類型的元素,但也允許它們有一些差異。 你可以使用一些簡單的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;
}

這將為兩種類型的div添加共享屬性,但僅將特定的屬性添加到派生的div


如果您希望具有特定類的所有內部DIV從基類繼承,則構建HTML標記,如下所示:

<div class="parent">
    <div class="child">X</div>
</div>

和CSS

.parent { border: 2px solid red; color: white }
.parent .child { background: black }

如果所有DIV必須繼承更改.childdiv

在jsFiddle上查看此示例

以下代碼

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

意思是:帶有someClass類的頂級元素(any)會將樣式添加到其所有子DIV(遞歸)。


對於此任務,我建議您使用名為LESS的強大CSS擴展。 它可以編譯成CSS,或者可以在鏈接解釋時使用javascript文件即時使用。

LESS支持繼承(幾乎),如您所述。 documentation包含詳細信息(請參閱“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


這真的取決於你的標記。 如果您的繼承元素位於具有someBasDiv類的div下,則它的所有子元素將自動繼承這些屬性。

但是,如果你想在標記的任何地方繼承someBaseDiv類,你可以只創建你想要繼承的元素,使用這兩個類,如下所示:

<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;
}

最簡單的方法是將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的特殊性





css