縮短複雜的CSS選擇器

Question

我試圖縮短閱讀 例如爲了便於一些CSS選擇器：

.a>.c,.b>.c 

我想我有更多的選擇

繼續之前曾使用括號在過去集團工會

(.a,.b)>.c 

但似乎這是無效的CSS。

我是否曾夢想過之前做過這樣的事情，還是有一種簡單的方法？

我主要關心的是css的可讀性而不是字節數，但這是縮短選擇器的另一個顯而易見的優點，如上所述。

Answer 1

在CSS中不使用括號。請參閱Selectors Level 3 W3C Recommendation。

如果.c是隻有永遠的.a孩子和.b，你可以簡單地使用：

.c { } 

如果.a和.b從.x不同（假設.x有.c孩子），你可以給他們一個特定的類或data-* attribute：

<div class="a t" <!-- or --> data-t><span class="c"></span></div> 
<div class="b t" <!-- or --> data-t><span class="c"></span></div> 
<div class="x"><span class="c"></span></div> 

和風格使用：

.t > .c { } 
/* Or */ 
[data-t] > .c { } 

否則，沒有什麼大的無法讀取關於你已經擁有的東西。如果你想讓它更容易閱讀，只需將它們分開一點，然後將每個選擇器放在一個新行上：

.a > .c, 
.b > .c { 
    ... 
}