我如何繼承CSS

類寫一些CSS類，如這些：我如何繼承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-*屬性沒有被繼承（或者在第一種情況下不起作用）。

我正在尋找一種避免代碼重複的方法。有什麼辦法可以實現嗎？

我不允許使用less或任何外部工具或庫。我只想讓我的代碼在原生CSS中看起來更簡短，我可以把它放在html文件本身中（沒有外部的.css文件）。我被允許在HTML本身使用JavaScript（儘管沒有jQuery）。

來源

2014-06-30 Nawaz

您需要同時利用CSS類的HTML元素。你能告訴我們你的HTML代碼使用這些類（好，壞，醜：P） – GoodSp33d

你不能繼承類。只有屬性可以在CSS中繼承。除了類選擇器，CSS沒有任何類的概念。 –

@ JukkaK.Korpela：好的。我不太瞭解CSS，所以我不知道'.good，.common {...}'在我的代碼中意味着什麼？這是否意味着'.good'應該包含'.common'的所有內容？ – Nawaz

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

來源

2014-06-30 06:26:52 panther

稍後在'.good'中設置更多屬性時，第二個是好的（雙關意圖）。這樣我就可以定義所有的類，只有一個共同的屬性，然後再添加更多（不同的）屬性。 – Nawaz

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

這次它將應用綠色背景而不是粉紅色。我希望你明白在這裏做什麼命令。所以它不會繼承任何東西，爲什麼你需要這個？我們可以拿出普通課。所以無論我們想要什麼，我們都可以像上面的答案一樣使用多個類。

Here is the fiddle with my answer.

來源

2014-06-30 06:15:53

好的。這似乎是另一種方式。但是這並不能解釋我的代碼中有什麼問題？我不太瞭解CSS，所以我不知道'.good，.common {...}'在我的代碼中意味着什麼？這是否意味着'.good'應該包含'.common'的所有內容？ – Nawaz

這是解決底層問題的好方法，但它與繼承無關。它只是爲某些元素分配兩個類，以便元素將匹配兩個不同的類選擇器。 –

在您當前的結構中，.bad，.common.css類將覆蓋.good，.common類。這個不對。 –

，你應該寫一個BaseClass的，並指它在你的標籤爲EG：

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

來源

2014-06-30 06:16:24 jony89

我如何繼承CSS

回答

相關問題