css - tip - title html tag




CSS繼承 (4)

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


使用這兩個類並將它們組合如下:

.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定義中,因此它更清晰一些。


對於此任務,我建議您使用名為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


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