我可以在CSS中分組多個樣式聲明嗎？

比方說，我有一些HTML這樣的：我可以在CSS中分組多個樣式聲明嗎？

<div id="Group1"> 
    <p class="first">Lorem <span class="special">ipsum</span></p> 
    <p class="second">Lorem ipsum</p> 
    <p class="third">Lorem ipsum</p> 
</div> 
<div id="Group2"> 
    <p class="first">Lorem <span class="special">ipsum</span></p> 
    <p class="second">Lorem ipsum</p> 
    <p class="third">Lorem ipsum</p> 
</div>

樣式的段落不同，我必須聲明我的CSS是這樣的：

#Group1 p.first { 
    color: blue; 
} 
#Group1 span.special { 
    color: green; 
} 
#Group2 p.first { 
    color: red; 
} 
#Group2 span.special { 
    color: orange; 
}

有沒有辦法來組聲明，所以我不必須重複＃Group1和＃組2（像這樣）：

#Group1 { 
    p.first { 
    color: blue; 
    } 
    span.special { 
    color: green; 
    } 
} 
#Group2 { 
    p.first { 
    color: red; 
    } 
    span.special { 
    color: orange; 
    } 
}

當你有很多選擇的，它可以很麻煩總是重新輸入。有沒有辦法在CSS中做到這一點 - 這將是一個很好的速記！

來源

2014-02-13 ChiCgi

你應該看看「LESS」 – Bobby5193

你可以使用CSS預處理程序，如薩斯，LESS，手寫筆，... –

同意。事實上，你所寫的*是可接受的LESS語法。 –

CSS預處理器提供了編寫更多簡化樣式的功能，這些樣式被編譯到CSS中。

LESS,Sass和Stylus是本文最受歡迎的*。每個人都有一套略有不同的特點，但他們都支持選擇分組，你已經證明它：

_預處理：

#Group1 { 
    p.first { 
    color: blue; 
    } 
    span.special { 
    color: green; 
    } 
}

_編譯CSS：

#Group1 p.first { 
    color: blue; 
} 
#Group1 span.special { 
    color: green; 
}

至於對於原始CSS而言，目前還沒有以這種方式對選擇器進行分組的標準化方式。我的建議是嘗試一些CSS預處理器，並堅持最適合你的一個。從我的主觀經驗來看，他們使項目中的大量CSS變得更加容易。

_{*他們是按字母順序排列，而不是普及，這是如有變更，}

來源

2014-02-13 23:19:56 zzzzBov

您應該嘗試使用LESS。你可以在這裏找到更多信息：LESSCSS

來源

2014-02-13 23:12:06 Bobby5193

我可以在CSS中分組多個樣式聲明嗎？

回答

相關問題