有沒有一種更有效的方式來編寫具有一對多關係的類的CSS？

在我的CSS，我有這樣的事情：有沒有一種更有效的方式來編寫具有一對多關係的類的CSS？

.classA .class1, 
.classA .class2, 
.classA .class3 a:hover, 
.classA .class4, 
.classA #id1, 
.classA .class5 
{ color: white;} 

.classA .class1, 
.classA .class6 
{ background-color: red;}

等等

因爲我重複.classA了這麼多，我想知道是否有寫這更有效的方式？

我的使用情況：

我與造型相似的元素，但與不同的配色方案不同的頁面。因此，我不是.classA，而是將一類.Orange添加到一個頁面，並且說，.Green到另一個頁面，.Blue到第三個。

然後，我將橙色和綠色和藍色樣式分別應用到這些頁面上的元素。

.Orange .btn, 
.Orange .accordion-heading, 
.Orange .promo-box {color: orange; background: white;} 
.Orange h2 {color: orange;} 

.Green .btn, 
.Green .accordion-heading, 
.Green .promo-box {color: green; background: white;} 
.Green h2 {color: green;}

來源

2017-08-27 jough

這些類實際上代表什麼？「一對多關係」並沒有太多解釋。 – Ryan

如果它們存在於.classA中的任何位置，則基本上將樣式應用於.class2，.class3等。如果這不是你的主要要求，你可以分開課程。 – Amit

如果你需要指定.classA作爲所有這些的父類，那麼不，我不能想到。在LESS或SASS這樣的預處理器中編寫代碼要容易得多，因爲您可以將所有其他類嵌套在.classA下，或者使用mixins快速重複代碼。 – Jesse

除非您希望它優先於其他選擇器，否則不需要重複.classA。當你像前面一樣使用選擇器時，你會增加規則的特殊性。例如，採取以下代碼：

.classA .class1 {color:red;} 
.class1 {color:white;} 

<div class="classA"> 
    <div class="class1">Text</div> 
</div>

結果爲紅色文本，因爲你的第一個規則是比第二更具體的，即使第二來得晚源順序。

CSS規範規定，選擇優先級是受三個因素，爲了：

重要性
特異性
源順序

所以，選擇重複的量在很大程度上直到你如何設置你的樣式表和期望的結果。更多的信息在這裏：

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

來源

2017-08-27 15:38:34 jfeferman

「你根本不需要重複.classA，除非你希望它優先於其他選擇器。「我會假設這正是爲什麼提問者完全在指定.classA類，爲什麼你確定他們不需要？ – BoltClock

我不確定，只是假設，因爲問題是模糊的也許正確的答案是否定的，除非你使用預處理器，否則CSS結構可以適用於無數的解決方案，更多的信息可以幫助提問者更好地構建自己的代碼。 – jfeferman

有沒有一種更有效的方式來編寫具有一對多關係的類的CSS？

回答

相關問題