CSS 選擇器分組

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

h2, p

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

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

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

body, h2, p, table, th, td, pre, strong, em

通過分組，創作者可以將某些型別的樣式「壓縮」在一起，這樣就可以得到更簡潔的樣式表。

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

/* no grouping */

h1 h2

h3 h4

h5 h6

/* grouping */

h1, h2, h3, h4, h5, h6

分組提供了一些有意思的選擇。例如，下例中的所有規則分組都是等價的，每個組只是展示了對選擇器和宣告分組的不同方法：

/* group 1 */

h1 h2

h3 h4

b /* group 2 */

h1, h2, h4

h2, h3

h1, h4, b

h3 b

/* group 3 */

h1, h4

h2 h3

h2, h3

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

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

這是 heading 4 這是一段普通的段落文字。

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

我們既可以對選擇器進行分組，也可以對宣告分組。

假設您希望所有 h1 元素都有紅色背景，並使用 28 畫素高的 verdana 字型顯示為藍色文字，可以寫以下樣式：

h1 h1

但是上面這種做法的效率並不高。尤其是當我們為乙個有多個樣式的元素建立這樣乙個列表時會很麻煩。相反，我們可以將宣告分組在一起：

h1

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

注意，對宣告分組，一定要在各個宣告的最後使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。只要加了分號，就可以毫無顧忌地採用以下格式建立樣式：

h1

怎麼樣，上面這種寫法的可讀性是不是更強。

不過，如果忽略了第二個分號，使用者**就會把這個樣式表解釋如下：

h1

因為 background 對 color 來說不是乙個合法值，而且由於只能為 color 指定乙個關鍵字，所以使用者**會完全忽略這個 color 宣告（包括 background: black 部分）。這樣 h1 標題只會顯示為藍色，而沒有紅色背景，不過更有可能根本得不到藍色的 h1。相反，這些標題只會顯示為預設顏色（通常是黑色），而且根本沒有背景色。font: 28px verdana 宣告仍能正常發揮作用，因為它確實正確地以乙個分號結尾。

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

在規則的最後乙個宣告後也加上分號是乙個好習慣。在向規則增加另乙個宣告時，就不必擔心忘記再插入乙個分號。

我們可以在乙個規則中結合選擇器分組和宣告分組，就可以使用很少的語句定義相對複雜的樣式。

下面的規則為所有標題指定了一種複雜的樣式：

h1, h2, h3, h4, h5, h6

this is heading 4 this is heading 5 this is heading 6

我們可以在乙個規則中結合選擇器分組和宣告分組，就可以使用很少的語句定義相對複雜的樣式。

下面的規則為所有標題指定了一種複雜的樣式：

h1, h2, h3, h4, h5, h6

上面這條規則將所有標題的樣式定義為帶有白色背景的灰色文字，其內邊距是 10 畫素，並帶有 1 畫素的實心邊框，文字字型是 verdana。

我們可以在乙個規則中結合選擇器分組和宣告分組，就可以使用很少的語句定義相對複雜的樣式。

下面的規則為所有標題指定了一種複雜的樣式：

h1, h2, h3, h4, h5, h6

CSS 選擇器分組

CSS選擇器的分組

CSS 通用和分組選擇器十

css選擇器 CSS選擇器總結

CSS 選擇器分組

CSS選擇器的分組

CSS 通用和分組選擇器 十

css選擇器 CSS選擇器總結

相關推薦

CSS 通用和分組選擇器十