CSS基礎學習四：元素選擇器 · Web前端HTML+CSS+JS初級入門

在上一篇的博客中我們已經熟悉CSS語法，對于CSS代碼格式也有了一些認識。下面我就來說一下CSS代碼式：選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；......} 屬性與屬性之間用分號隔開；屬性與屬性值直接使用冒號連接；如果一個屬性有多個屬性值的話，那么多個屬性值用空格隔開。上述提到了我這一篇博客所要說的主題，就是選擇器。選擇器就是指定CSS語法要作用的標簽，那個標簽的名稱就是選擇器。基本的選擇器可分為三種： a)html標簽名選擇器：使用的是html的標簽名，又叫元素選擇器。 b)class選擇器;使用的是標簽內的class屬性，又叫類選擇器。 c)id選擇器：使用的是標簽內的id屬性。每一個標簽都定義了class屬性和id屬性，用于對標簽進行標識，方便對標簽進行操作。在定義中，多個標簽的 class屬性值可以相同，而id屬性值必須唯一，因為JavaScript中經常使用。 ### 一,CSS元素選擇器最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。下面舉個最簡單的例子： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS元素選擇器演示</title> <style type="text/css"> html {color:#00FFFF;} h1 {color:#FFFF00;} h2 {color:#FF0000;} </style> </head> <body> <h1>這是 heading 1</h1> <h2>這是 heading 2</h2> <p>這是一段普通的段落</p> </body> </html></span> ~~~ 瀏覽器顯示結果為： ![](https://box.kancloud.cn/2016-04-28_57215593a4acb.jpg) 從上述的結果來看選擇器的優先級還是有一定的選擇性的，html選擇器作用的是網頁中的全部字體，而h1和h2作用的僅僅是自己標簽名的標簽。可以將某個樣式從一個元素切換到另一個元素。假設您決定將上面的段落文本（而不是 h1 元素）設置為p。只需要把 h1 選擇器該為 p： ~~~ <span style="font-size:18px;">html {color:#00FFFF;} p {color:#FFFF00;} h2 {color:#FF0000;}</span> ~~~ 瀏覽器顯示結果為： ![](https://box.kancloud.cn/2016-04-28_57215593b90d1.jpg) ### 二,選擇器分組假設希望 h2 元素和段落都有灰色。為達到這個目的，最容易的做法是使用以下聲明： h2, p {color:gray;} 將 h2 和 p 選擇器放在規則左邊，然后用逗號分隔，就定義了一個規則。其右邊的樣式（color:gray;）將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那么規則的含義將完全不同。還是上述的例子： ~~~ <span style="font-size:18px;">html {color:#00FFFF;} h2,p{color:#FFFF00;}</span> ~~~ 瀏覽器顯示結果為：?? ![](https://box.kancloud.cn/2016-04-28_57215593cb33d.jpg) 可以將任意多個選擇器分組在一起，對此沒有任何限制。例如，如果您想把很多元素顯示為灰色，可以使用類似如下的規則： body, h2, p, table, th, td, pre, strong, em {color:gray;} 通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。再舉一個簡單的示例：以下的兩組規則能得到同樣的結果，不過可以很清楚地看出哪一個寫起來更容易： ~~~ <span style="font-size:18px;">/* 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;}</span> ~~~ 使用第二種代碼為： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS元素選擇器演示</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 {color:blue;} </style> </head> <body> <h1>這是 heading 1</h1> <h2>這是 heading 2</h2> <h3>這是 heading 3</h3> <h4>這是 heading 4</h4> <h5>這是 heading 5</h5> <h6>這是 heading 6</h6> </body> </html></span> ~~~ 瀏覽器顯示結果為： ![](https://box.kancloud.cn/2016-04-28_57215593dcbc6.jpg) 三通配符選擇器(感覺還是劃分到元素選擇器比較好，說到底還是用標簽名的一類選擇器) CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。例如，下面的規則可以使文檔中的每個元素都為紅色：* {color:red;}這個聲明等價于列出了文檔中所有元素的一個分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定為 red。 ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS元素選擇器演示</title> <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></span> ~~~ 瀏覽器顯示結果為： ![](https://box.kancloud.cn/2016-04-28_57215593ed951.jpg) ### 四,聲明分組我們既可以對選擇器進行分組，也可以對聲明分組。假設您希望所有 h1 元素都有紅色背景，并使用 28 像素高的 Verdana 字體顯示為藍色文本，可以寫以下樣式： ~~~ <span style="font-size:18px;">h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;}</span> ~~~ 但是上面這種做法的效率并不高。尤其是當我們為一個有多個樣式的元素創建這樣一個列表時會很麻煩。相反，我們可以將聲明分組在一起： ~~~ h1 {font: 28px Verdana; color: white; background: black;} ~~~ 這與前面的 3 行樣式表的效果完全相同。注意，對聲明分組，一定要在各個聲明的最后使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。 ### 五,結合選擇器和聲明的分組我們可以在一個規則中結合選擇器分組和聲明分組，就可以使用很少的語句定義相對復雜的樣式。 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS元素選擇器演示</title> <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> ~~~ 瀏覽器顯示： ![](https://box.kancloud.cn/2016-04-28_572155940a75b.jpg) 涉及到選擇器優先級的問題，我會用專門的一篇博客來解釋說明這個問題。 ? ? ? ?? ? ? ?? ? ? ?? ? ? ?