如何在css中繼承類

Question

我寫了幾個css類，比如：

.bad
{
    background:#fff0f0;
    color:#800;
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good
{
    background:#eeffee;
    color:#008800; 
    width:1024px;        //same as above
    padding-left:10px;   //same as above
    margin-top:0;        //same as above
    margin-bottom:0;     //same as above
}

正如您在6個屬性中看到的那樣，4個屬性完全相同。 所以我想通過編寫.common類來避免這種重復，並在定義上面的類時繼承它們，如下所示：

.common
{
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good, .common    //inherit .commom
{
    background:#eeffee;
    color:#008800;
}
.bad, .common     //inherit .commom
{
    background:#fff0f0;
    color:#800;
}

但是這些更改不會對瀏覽器產生相同的影響。 我在<p>標簽上應用它們，在后一種情況下我看到兩個連續的<p >標簽之間存在間隙。 所以似乎margin-*屬性不是繼承的（或者在第一種情況下不起作用）。

我正在尋找一種避免代碼重復的方法。 有沒有辦法實現這一目標？

我不允許使用更少或任何外部工具或庫。 我只是希望我的代碼在原生CSS中看起來更簡潔，更簡潔，我可以把它放在html文件本身（沒有外部的.css文件）。 我被允許在html本身使用javascript（雖然沒有jquery）。

Answer 1

使用HTML，您可以繼承其他類屬性。 你需要像這樣申請你的段落。

<p class="good common">Some Text</p>
<p class="bad common">Some new Text</p>

需要更新您的CSS，如下所示。

.common
{
width:1024px;
padding-left:10px;
margin-top:0;
margin-bottom:0;
}
.good
{
background:#eeffee;
color:#008800;
}
.bad
{
background:#fff0f0;
color:#800;
}

說明 ：

首先，我將向您展示您希望當前的結構正在做什么。 檢查這個小提琴http://jsfiddle.net/FeyLJ/ 。 現在你可以看到兩段之間的差距。 所以，根據你的想法，它不會從CSS繼承任何東西。 所以需要在你的段落中添加公共類。 喜歡

 <p class="good common">My Smaple Text</p>
 <p class="bad common">My another Simple Text</p>

添加之后看到小提琴http://jsfiddle.net/FeyLJ/1/你得到了什么效果？ 現在保證金問題消失了。 但是你注意到它又產生了一個問題。 是的，段落現在都應用相同的顏色背景。 為什么？ 在CSS中，如果您使用具有相同屬性的相同類兩次，則它將從最后定義的位置獲取屬性。 在這種情況下，兩者都采用相同的壞類背景。

為了您的澄清，移動類的順序如下。

.bad, .common 
{
background:#fff0f0;
color:#800;
} 

.good, .common 
{
background:#eeffee;
color:#008800;
}

這次它將應用綠色背景而不是粉紅色。 我希望你明白這里的訂單是做什么的。 所以它不會繼承任何東西，為什么你需要這個？ 我們可以拿出公共課。 所以無論我們想要什么，我們都可以像上面的答案一樣使用多個類。

這是我答案的小提琴。

Answer 2

.bad, .common //inherit .commom沒有按你的想法做，它將樣式設置為.bad和.common元素。

如果每個元素都有兩個類，則可以使用它。

<style>

.common {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="common bad">bad</p>
<p class="common good">good</p>

如果你只有一個類，每個元素bad good ，那么就使用它

<style>

.bad, .good {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="bad">bad</p>
<p class="good">good</p>

Answer 3

你應該寫一個BaseClass並在你的標簽中引用它：

<p class="MyBaseClassForP ExtraClass AnotherExtraClass">text</p>