建站
咨詢
售后
建站咨詢
新聞中心
在CSS里邊，選擇器h1,h2,h3會同時命中h1元素、h2元素和h3元素。與此類似，.button,button會命中button元素和類名為.button的元素。這種選擇器稱為群組選擇器。群組選擇器的規(guī)則會對命中群組中任何一個選擇器的元素生效。
.button, button {
margin: 0;
}當(dāng)看到上邊這段代碼時，你可能還沒意識到會有重復(fù)性的工作。但會很快發(fā)現(xiàn)——如果你需要在一個特定的容器元素內(nèi)對這樣一個群組選擇器進(jìn)行修飾，情況就不同了。css的寫法會讓你在群組選擇器中的每一個選擇器前都重復(fù)一遍容器元素的選擇器。
.container h1, .container h2, .container h3 { margin-bottom: .8em }非常幸運(yùn)，sass的嵌套特性在這種場景下也非常有用。當(dāng)sass解開一個群組選擇器規(guī)則內(nèi)嵌的規(guī)則時，它會把每一個內(nèi)嵌選擇器的規(guī)則都正確地解出來:
.container {
h1, h2, h3 {margin-bottom: .8em}
}首先sass將.container和h1.container和h2.container和h3分別組合，然后將三者重新組合成一個群組選擇器，生成你前邊看到的普通css樣式。對于內(nèi)嵌在群組選擇器內(nèi)的嵌套規(guī)則，處理方式也一樣:
nav, aside {
a {color: blue}
}首先sass將nav和aaside和a分別組合，然后將二者重新組合成一個群組選擇器:
nav a, aside a {color: blue}處理這種群組選擇器規(guī)則嵌套上的強(qiáng)大能力，正是sass在減少重復(fù)敲寫方面的貢獻(xiàn)之一。尤其在當(dāng)嵌套級別達(dá)到兩層甚至三層以上時，與普通的css編寫方式相比，只寫一遍群組選擇器大大減少了工作量。
有利必有弊，你需要特別注意群組選擇器的規(guī)則嵌套生成的css。雖然sass讓你的樣式表看上去很小，但實(shí)際生成的css卻可能非常大，這會降低網(wǎng)站的速度。
關(guān)于選擇器嵌套的最后一個方面，我們看看sass如何處理組合選擇器，比如>、+和~的使用。你將看到，這種場景下你甚至無需使用父選擇器標(biāo)識符。
名稱欄目：創(chuàng)新互聯(lián)SASS教程:2-2.群組選擇器的嵌套
轉(zhuǎn)載源于：http://www.5511xx.com/article/dhoigsi.html
