繼承自另一個css類

我在這裏有一個問題，我似乎無法弄清楚，直到現在我的CSS一直slapdash，它總是一個黑客的情況下，直到它看起來是正確的，但我已經決定正確地學習它，我試圖儘可能地對事物進行分類。繼承自另一個css類

所以我有一個有無序列表的佈局，這個列表有三個li標籤，每個li標籤裏面有兩個div。

現在我有一個這些容器的每個類的類，它們可以被稱爲container_1 container_2等。

現在他們每個人都有一些獨特的屬性，但他們也遵循一個集樣式，例如，每個李的div並排，所以它的兩個div的集合也都會有圓角。

所以我想我可以做一個類類rounded_corners加float_left和float_right再等等，而不是鍵入代碼圓雞眼或漂浮的東西我可以參考的東西類是這樣的：

.container_1 .rounded_corners .float_left 
{ 

} 
.container_2 .rounded_corners .float_right 
{ 

}

但是，當我用這個，我放鬆了我的造型，所以我用了一個逗號，這樣可以讓div回來，但角落和花車不起作用。

那麼我在哪裏錯了呢？

這是我的代碼，我已經把代碼打破了佈局，但是如果你刪除了註釋，你可以看到會發生什麼。

http://jsfiddle.net/ragebunnykickass/g3Zaz/

的命名是有點不同，但你知道是什麼意思。

謝謝。

來源

2012-10-24 ragebunny

只是以供將來參考：類名基於*如何看起來*不推薦。基於*代表什麼*的類名稱要好得多。 –

@RyanKinal感謝您的提示夥伴，這些名稱目前僅用於測試目的，通常我對命名非常嚴格（這是我對哈哈嚴格的一件事） – ragebunny

總是很好聽！ –

CSS類不能繼承，所以你必須做的就是將它們分割成儘可能多的原子。例如，如果你有一個圓潤，邊角類，它可以適用於容器：

.rounded-corners 
{ 
    /* Your CSS to define rounded corners */ 
}

請注意，您只定義了圓角的屬性。現在讓我們假設你有一個類樣式的容器（例如用適當的填充）：

.container 
{ 
    /* Your CSS to define a nice container */ 
}

如何將它們結合在一起？這不會在CSS但在HTML來完成，在這個例子來自container和rounded-corners這<div>繼承：

<div class="container rounded-corners"> 
</div>

現在假設你需要圓角的非容器對象：

<div class="rounded-corners"> 
</div>

這就是CSS的工作原理。不要將它們（由於名稱）與面嚮對象語言的類進行比較。每個類定義一組將應用於屬於該類的所有元素的屬性。最終元素樣式是從元素所屬的每個類繼承的屬性的組合。

備註：總結：回答是是的，您可能需要重複一些代碼。如果您使用類作爲樣式的短名稱，那麼您將無法管理代碼（包括HTML和CSS）：您會發現您錯過了將樣式與內容分離的觀點（因爲在HTML中，您將使用類似rounded-corners，顯式外觀）。想象一下：下個月你必須改變你的網站風格和時尚要求強加你的方方面面。您必須更改您的HTML代碼（除非您接受rounded-corners類應用平方邊框）。如果你簡單地說container並且讓你的CSS定義（並且知道）應該如何呈現container會好得多。

它可能適用於您或不（這取決於您的喜好，品味和發展環境），但您可以看看LESS。它被實現爲一個將解析你的CSS的JavaScript。當然，你不會寫一個純粹有效的CSS，但你會獲得許多新的功能。在你的情況你會發現mixins是你所需要的：

.rounded-corners 
{ 
    /* Your CSS here */ 
} 

.float-left 
{ 
    /* Your CSS here */ 
} 

.container 
{ 
    .rounder-corners 
    .float-left 
}

來源

2012-10-24 14:58:14

我明白了，我認爲我正在努力改變我對班級的思考方式，我習慣於使用面向對象的語言。至於最後一個註釋，你是說使用一個名字如round_corners的類是不好的，因爲它沒有解釋類是什麼，我最終只是使用class =「rounded_corners」？ – ragebunny

也許像market_card_boder_style這樣的東西會解釋更多。 – ragebunny

@ragebunny不，這不是因爲意思。嘗試回答：例如，如果cellpadding屬性被認爲是邪惡的（因爲您將內容與HTML中的樣式混合），那麼爲什麼圓角應該更好？你用HTML寫了一些關於外觀的東西。「容器」是好的（你說它是一個容器，你不會問它應該如何渲染）。我添加了一個關於LESS的小例子，看看它。 –

你可以有一個CSS代碼，如：

.container_1 { 

} 
.rounded_corners { 

} 
.float_left { 

}

，然後以這種方式設置一個類來HTML元素：

<div class="container_1 rounded_corners float_left">...</div>

所以DIV元素將繼承各個類的各個風格！顯然，DIV只是一個例子，你可以使用每個標籤！

來源

2012-10-24 14:56:44 jan267

如果我得到它好，你想一組類應用到每個單嗎？

我打破它像：

CSS

.rounded_corners {} 
.float_left {} 
.float_right {} 
.container {}

，並在HTML

<li id="container_1" class="container float_left rounded_corners">...</li> 
<li id="container_2" class="container float_right rounded_corners">...</li>

等等

來源

2012-10-24 15:00:58 Thai

所以，我沒有辦法在CSS表中使用我的容器類的rounded_corner類？ – ragebunny

沒有這樣做的更整潔的方法，因爲將多個類放入html中的class屬性看起來非常混亂，並且總是要求您儘可能使事情變得清晰和乾淨。 – ragebunny

好吧，你可以把'rounded_corners'屬性放在'容器'類中，如果你的所有容器都有這個屬性 – Thai

繼承自另一個css類

回答

相關問題