首頁 > 文章 > web前端 > CSS教學之深入淺析CSS 選擇器分組

CSS教學之深入淺析CSS 選擇器分組

无忌哥哥原創: 2018-07-12 14:49:171349瀏覽

這篇文章主要介紹了CSS 選擇器分組的相關資料,需要的朋友可以參考下

#選擇器分組

假設希望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;}

通配符選擇器

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

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

* {color:red;}
<html>
<head>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>

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

宣告分組

我們既可以將選擇器分組，也可以將宣告分組。

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

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

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

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

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

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

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

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

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

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

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

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

提示：在規則的最後一個宣告後面也加上分號是一個好習慣。在規則中增加另一個聲明時，就不必擔心忘記再插入一個分號。

結合選擇器和宣告的分組

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

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

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

結合選擇器和聲明的分組

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

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

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

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

結合選擇器和宣告的分組

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

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

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

以上是CSS教學之深入淺析CSS 選擇器分組的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3中的calc函數淺析_css3下一篇：css3中的calc函數淺析_css3

看更多