CSS - Group多個選擇器應用於一個ID

Question

我們希望爲客戶端設置移動樣式表 - 由於系統設置，我們只能包含一個樣式表。

每個頁面都有一個ID，並且由於網站的設計，我們希望能夠以不同的方式針對每個頁面中的元素進行定位。

我知道我們可以通過通過#home .classname {}針對類做到這一點，但在一個前綴想知道是否有任何方式組一堆類，而不是單獨如 -

#home{ 
    .classname1{} 
    .classname2{} 
    .classname3{} 
} 

我從來沒有讀過關於這方面的任何內容，只是認爲這對我們的案例會非常有用，並且可能在過去曾經考慮過？

乾杯 保羅

Answer 1

不，那是不可能的。你可以使用像Less或Sass這樣的東西，它們可以像這樣嵌套，但是它們需要被編譯成CSS。

除此之外，你必須使用：

#home .classname1{} 
#home .classname2{} 
#home .classname3{} 

Answer 2

這不是寫CSS中嵌套樣式

#home{ 
    .classname1{} 
    .classname2{} 
    .classname3{} 
} 

你可以寫CSS如下格式的有效途徑：

#home .classname1{} 
#home .classname2{} 
#home .classname3{} 

Answer 3

您可以使用

#home .classname1, #home .classname2, #home .classname3 
{ 
} 

，如果你想應用到所有類或某事

#home .classname1{} 
#home .classname2{} 
#home .classname3{} 

Answer 4

您可以使用嵌套樣式Sass或Less。 在這種情況下，我建議您在HTML結構中使用一個額外的樹類類，例如當您有類似列的結構時。

<div class="classname1 combinedclass"></div> 
<div class="classname2 combinedclass"></div> 
<div class="classname2 combinedclass"></div> 

CSS

.combinedclass { 
    // Styles here 
} 

Answer 5

您正在尋找CSS擴展庫。這兩個最流行的是：

1. LESS
2. SASS

使用其中任何一個，你可以通過這種方式

#home{ 
    .classname1; 
    .classname2; 
    .classname3; 
} 

Answer 6

一個詞結合您的風格：LESS。

只需在開發時使用less.js，並在推送到產品時編譯爲縮小的CSS文件。