如何創建CSS類聯盟？

Question

我有一個div，工會CSS階級作爲階級：

<div id="tp" class="ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"> 
     ... 
    </div> 

如何創建CSS樣式，我可以用一個不顯眼的名字結合所有這些類的連成一個類？

例如：

<div class="myCustomClass"> 
... 
<div> 

凡我自定義類是所有組合類的交集？我似乎無法找到如何完成這個過程的例子或好的解釋。

在此先感謝您閱讀我的問題！

Answer 1

AFAIK在CSS中不可能。您可以將規則提供給多個選擇器：

.one, .two, .three { color:red; } 

或者手動向每個HTML元素添加泛型類。

如果你想針對的是有一定的類的元素，你可以做.one.two.three {}

Answer 2

你可以嘗試使用像LESS或SCSS實現這些類in mixins的可重複使用的元素。請注意，您不必在Ruby應用中使用其中任何一種;在PHP，JavaScript和.NET和SCSS中有多個端口，你可以獨立運行（但需要ruby運行）

Answer 3

我認爲你正在向後看問題。如果所有這些類都具有與它們相關的相同CSS規則，那麼您應該只在樣式表中組合這些規則。不過，正如Jason McCreary所言，我認爲最終你會發現，這會導致靈活性降低，工作量增加。

您的示例中列出的類可能來自某個UI框架，DOM樹下面的元素將根據它們是否爲具有特定類的元素的後代來進行樣式設置，即。像這樣的規則：

.ui-tablepicker td a {/* some style */} 

但隨後還會有其他的規則是這樣的：

.ui-widget-content a {/*some other style*/} 

如果你想這些類的名稱結合起來，你會像這樣結束：

.myCustomClass1 a {/* Replaces case where only .ui-tablepicker parent exists */} 
.myCustomClass1 td a {/* Replaces case where only .ui-tablepicker parent exists */} 
.myCustomClass2 a {/* Replaces case where only .ui-widget-content parent exists */} 
.myCustomClass2 td a {/* Replaces case where only .ui-widget-content parent exists */} 
.myCustomClass3 a {/* Replaces case where both exist */} 
.myCustomClass3 td a {/* Replaces case where both exist */} 

這是保持樣式表可管理的類名的分離。

如果鍵入所有這些類反覆越來越給你，然後使用一個變量來保存他們在您的網頁生成的代碼，類似：

<? 
$myCustomClass = "ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"; 
?> 
<div id="tp1" class="<? echo $myCustomClass; ?>"> 
    ... 
<div id="tp2" class="<? echo $myCustomClass; ?>">