2-2. 群組選擇器的嵌套

在CSS里邊，選擇器h1,h2,h3會(huì)同時(shí)命中h1元素、h2元素和h3元素。與此類似，.button,button會(huì)命中button元素和類名為.button的元素。這種選擇器稱為群組選擇器。群組選擇器的規(guī)則會(huì)對(duì)命中群組中任何一個(gè)選擇器的元素生效。

.button, button {
  margin: 0;
}

當(dāng)看到上邊這段代碼時(shí)，你可能還沒意識(shí)到會(huì)有重復(fù)性的工作。但會(huì)很快發(fā)現(xiàn)——如果你需要在一個(gè)特定的容器元素內(nèi)對(duì)這樣一個(gè)群組選擇器進(jìn)行修飾，情況就不同了。css的寫法會(huì)讓你在群組選擇器中的每一個(gè)選擇器前都重復(fù)一遍容器元素的選擇器。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

非常幸運(yùn)，sass的嵌套特性在這種場景下也非常有用。當(dāng)sass解開一個(gè)群組選擇器規(guī)則內(nèi)嵌的規(guī)則時(shí)，它會(huì)把每一個(gè)內(nèi)嵌選擇器的規(guī)則都正確地解出來:

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

首先sass將.container和h1.container和h2.container和h3分別組合，然后將三者重新組合成一個(gè)群組選擇器，生成你前邊看到的普通css樣式。對(duì)于內(nèi)嵌在群組選擇器內(nèi)的嵌套規(guī)則，處理方式也一樣:

nav, aside {
  a {color: blue}
}

首先sass將nav和aaside和a分別組合，然后將二者重新組合成一個(gè)群組選擇器:

nav a, aside a {color: blue}

處理這種群組選擇器規(guī)則嵌套上的強(qiáng)大能力，正是sass在減少重復(fù)敲寫方面的貢獻(xiàn)之一。尤其在當(dāng)嵌套級(jí)別達(dá)到兩層甚至三層以上時(shí)，與普通的css編寫方式相比，只寫一遍群組選擇器大大減少了工作量。

有利必有弊，你需要特別注意群組選擇器的規(guī)則嵌套生成的css。雖然sass讓你的樣式表看上去很小，但實(shí)際生成的css卻可能非常大，這會(huì)降低網(wǎng)站的速度。

關(guān)于選擇器嵌套的最后一個(gè)方面，我們看看sass如何處理組合選擇器，比如>、+和~的使用。你將看到，這種場景下你甚至無需使用父選擇器標(biāo)識(shí)符。