2011-11-18 78 views
3

我希望這不是重複的,但我不確定即使如何說出我想要做的事情。我有一些實用的CSS規則,像清除浮動和創建水平框。我想要做的是這樣的:通過選擇器添加CSS類

.clear{ 
    clear:both; 
} 
#someID > div{ 
    /*apply the .clear class here*/ 
} 

我知道我可以用JavaScript做到這一點,但我想,以避免class="clear"一百萬次,如果我能避免它。我也想避免在第二個選擇器中重複樣式信息,所以我不必維護多個實用程序類。

.clear類只是一個例子,我的實際類更多地涉及。

+0

可能是你必須閱讀這篇文章的http: //www.quirksmode.org/css/clearing.html – sandeep

+0

我讀過那篇文章可能是一百萬次。就像我說的,這只是一個簡單的例子,而不是完整的代碼。 – arb

回答

5

真的,你只是將不得不在你的標記使用實用工具類,如clear,除非你想做的事(你想要的東西,可能不是)這樣的事:

.clear, #someID > div 
{ 
    clear:both; 
    /* this assumes you have no other rules here, which probably isn't true */ 
} 

在總之,除非您想爲您的CSS使用預處理器,例如LESS,否則沒有更好的辦法。

+0

+1用於提供LESS鏈接,讓您可以進行OP想要的那種「規則調用」。 (請參閱帶角落的示例) –

+0

我必須記住LESS。我不知道這件事。這比我想現在要多一點。我不是一個真正的UI用戶,只是摸索着。感謝您的回答,儘管這是我害怕的:) – arb

+0

沒有問題,我沒有使用像LESS這樣的任何東西來簡化維護樣式表,因爲我通常更關心維護其他代碼。 – wsanville

1

你不能在純CSS中做到這一點。您可以使用LESS或jQuery輕鬆完成,只需使用: $('#someID > div').addClass('clear');

0

在HTML/CSS,你可以有多個clases這樣的:

HTML

<!--If you are using a id and a class:--> 
<div id="someID" class="clear"></div> 

<!--If you are using 2 classes--> 
<div class="someClass clear"></div> 

CSS

.clear{ 
    clear:both; 
} 
#someID { 
    /* specific style here */ 
} 
.someClass { 
    /* specific style here */ 
}