選擇器分組

假設(shè)希望 h2 元素和段落都有灰色。為達(dá)到這個(gè)目的，最容易的做法是使用以下聲明：

h2, p {color:gray;}

將 h2 和 p 選擇器放在規(guī)則左邊，然后用逗號(hào)分隔，就定義了一個(gè)規(guī)則。其右邊的樣式（color:gray;）將應(yīng)用到這兩個(gè)選擇器所引用的元素。逗號(hào)告訴瀏覽器，規(guī)則中包含兩個(gè)不同的選擇器。如果沒(méi)有這個(gè)逗號(hào)，那么規(guī)則的含義將完全不同。參見(jiàn)后代選擇器。

可以將任意多個(gè)選擇器分組在一起，對(duì)此沒(méi)有任何限制。

例如，如果您想把很多元素顯示為灰色，可以使用類(lèi)似如下的規(guī)則：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

提示：通過(guò)分組，創(chuàng)作者可以將某些類(lèi)型的樣式“壓縮”在一起，這樣就可以得到更簡(jiǎn)潔的樣式表。

以下的兩組規(guī)則能得到同樣的結(jié)果，不過(guò)可以很清楚地看出哪一個(gè)寫(xiě)起來(lái)更容易：

/* no grouping */ h1 {color:blue;} h2 {color:blue;} h2 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* grouping */ h1, h2, h2, h4, h5, h6 {color:blue;} 

分組提供了一些有意思的選擇。例如，下例中的所有規(guī)則分組都是等價(jià)的，每個(gè)組只是展示了對(duì)選擇器和聲明分組的不同方法：

/* group 1 */ h1 {color:silver; background:white;} h2 {color:silver; background:gray;} h2 {color:white; background:gray;} h4 {color:silver; background:white;} b {color:gray; background:white;} /* group 2 */ h1, h2, h4 {color:silver;} h2, h2 {background:gray;} h1, h4, b {background:white;} h2 {color:white;} b {color:gray;} /* group 3 */ h1, h4 {color:silver; background:white;} h2 {color:silver;} h2 {color:white;} h2, h2 {background:gray;} b {color:gray; background:white;} 

：

• group 1
• group 2
• group 3

請(qǐng)注意，group 3 中使用了“聲明分組”。稍后我們會(huì)為您介紹“聲明分組”。

通配符選擇器

CSS2 引入了一種新的簡(jiǎn)單選擇器 - 通配選擇器（universal selector），顯示為一個(gè)星號(hào)（*）。該選擇器可以與任何元素匹配，就像是一個(gè)通配符。

例如，下面的規(guī)則可以使文檔中的每個(gè)元素都為紅色：

* {color:red;}

這個(gè)聲明等價(jià)于列出了文檔中所有元素的一個(gè)分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個(gè)星號(hào)）就能使文檔中所有元素的 color 屬性值指定為 red。

聲明分組

我們既可以對(duì)選擇器進(jìn)行分組，也可以對(duì)聲明分組。

假設(shè)您希望所有 h1 元素都有紅色背景，并使用 28 像素高的 Verdana 字體顯示為藍(lán)色文本，可以寫(xiě)以下樣式：

h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;} 

但是上面這種做法的效率并不高。尤其是當(dāng)我們?yōu)橐粋€(gè)有多個(gè)樣式的元素創(chuàng)建這樣一個(gè)列表時(shí)會(huì)很麻煩。相反，我們可以將聲明分組在一起：

h1 {font: 28px Verdana; color: white; background: black;}

這與前面的 3 行樣式表的效果完全相同。

注意，對(duì)聲明分組，一定要在各個(gè)聲明的最后使用分號(hào)，這很重要。瀏覽器會(huì)忽略樣式表中的空白符。只要加了分號(hào)，就可以毫無(wú)顧忌地采用以下格式建立樣式：

h1 { font: 28px Verdana; color: blue; background: red; } 

怎么樣，上面這種寫(xiě)法的可讀性是不是更強(qiáng)。

不過(guò)，如果忽略了第二個(gè)分號(hào)，用戶代理就會(huì)把這個(gè)樣式表解釋如下：

h1 { font: 28px Verdana; color: blue background: red;} 

因?yàn)?background 對(duì) color 來(lái)說(shuō)不是一個(gè)合法值，而且由于只能為 color 指定一個(gè)關(guān)鍵字，所以用戶代理會(huì)完全忽略這個(gè) color 聲明（包括 background: black 部分）。這樣 h1 標(biāo)題只會(huì)顯示為藍(lán)色，而沒(méi)有紅色背景，不過(guò)更有可能根本得不到藍(lán)色的 h1。相反，這些標(biāo)題只會(huì)顯示為默認(rèn)顏色（通常是黑色），而且根本沒(méi)有背景色。font: 28px Verdana 聲明仍能正常發(fā)揮作用，因?yàn)樗_實(shí)正確地以一個(gè)分號(hào)結(jié)尾。

與選擇器分組一樣，聲明分組也是一種便利的方法，可以縮短樣式表，使之更清晰，也更易維護(hù)。

提示：在規(guī)則的最后一個(gè)聲明后也加上分號(hào)是一個(gè)好習(xí)慣。在向規(guī)則增加另一個(gè)聲明時(shí)，就不必?fù)?dān)心忘記再插入一個(gè)分號(hào)。

結(jié)合選擇器和聲明的分組

我們可以在一個(gè)規(guī)則中結(jié)合選擇器分組和聲明分組，就可以使用很少的語(yǔ)句定義相對(duì)復(fù)雜的樣式。

下面的規(guī)則為所有標(biāo)題指定了一種復(fù)雜的樣式：

h1, h2, h2, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; } 

上面這條規(guī)則將所有標(biāo)題的樣式定義為帶有白色背景的灰色文本，其內(nèi)邊距是 10 像素，并帶有 1 像素的實(shí)心邊框，文本字體是 Verdana。