選擇器分組

選擇器分組

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

h2, p {color:gray;} 將 h2 和 p 選擇器放在規則左邊，然後用逗號分隔，就定義了一個規則。其右邊的樣式（color:gray;）將套用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那么規則的含義將完全不同。參見後代選擇器。

可以將任意多個選擇器分組在一起，對此沒有任何限制。

例如，如果您想把很多元素顯示為灰色，可以使用類似如下的規則：

body, h2, p, table, th, td, pre, strong, em {color:gray;} 提示：通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。

以下的兩組規則能得到同樣的結果，不過可以很清楚地看出哪一個寫起來更容易：

/* no grouping */h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* grouping */h1, h2, h3, h4, h5, h6 {color:blue;} 分組提供了一些有意思的選擇。例如，下例中的所有規則分組都是等價的，每個組只是展示了對選擇器和聲明分組的不同方法：

/* group 1 */h1 {color:silver; background:white;} h2 {color:silver; background:gray;} h3 {color:white; background:gray;} h4 {color:silver; background:white;} b {color:gray; background:white;} /* group 2 */h1, h2, h4 {color:silver;} h2, h3 {background:gray;} h1, h4, b {background:white;} h3 {color:white;} b {color:gray;} /* group 3 */h1, h4 {color:silver; background:white;} h2 {color:silver;} h3 {color:white;} h2, h3 {background:gray;} b {color:gray; background:white;} 請注意，group 3 中使用了“聲明分組”。

通配符選擇器

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

例如，下面的規則可以使文檔中的每個元素都為紅色：

* {color:red;} 這個聲明等價於列出了文檔中所有元素的一個分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定為 red。