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

### 一,CSS類選擇器概述類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。只有適當地標記文檔后，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。 ### 二,修改 HTML 代碼在使用類選擇器之前，需要修改具體的文檔標記，以便類選擇器正常工作。為了將類選擇器的樣式與元素關聯，必須將 class 指定為一個適當的值。請看下面的 HTML 代碼： ~~~ <h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p> ~~~ 在上面的代碼中，兩個元素的 class 都指定為 important：第一個標題(h1元素)，第二個段落(p 元素)。 ### 三,CSS類選擇器語法然后我們使用以下語法向這些歸類的元素應用樣式，即類名前有一個點號（.），然后結合通配選擇器： ~~~ *.important {color:red;} ~~~ 如果您只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響： ~~~ .important {color:red;} ~~~ 以上兩種結果都是相同的顯示樣式為：字體為紅色。瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_572155941eea2.jpg) ### 四,結合元素選擇器類選擇器可以結合元素選擇器來使用。例如，您可能希望只有段落顯示為紅色文本： ~~~ p.important {color:red;} ~~~ 選擇器現在會匹配 class 屬性包含 important 的所有 p 元素，但是其他任何類型的元素都不匹配，不論是否有此 class 屬性。選擇器 p.important 解釋為：“其 class 屬性值為 important 的所有段落”。因為 h1 元素不是段落，這個規則的選擇器與之不匹配，因此 h1 元素不會變成紅色文本。瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_572155943307e.jpg) 如果你確實希望為 h1 元素指定不同的樣式，可以使用選擇器 h1.important： ~~~ p.important {color:red;} h1.important {color:blue;} ~~~ 由于文檔中只有p標簽h1標簽，因此這個結果等價于上述的結果： ~~~ .important {color:red;} ~~~ ### 五,CSS多類選擇器在上述描述中，我們處理了 class 值中包含一個詞的情況。在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作： ~~~ <p class="important warning">This paragraph is a very important warning.</p> ~~~ 這兩個詞的順序無關緊要，寫成 warning important 也可以。我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景。就可以寫作： ~~~ .important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;} ~~~ 瀏覽器顯示結果為： ![](https://box.kancloud.cn/2016-04-28_572155944d43c.jpg) 通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。請看下面的規則： ~~~ .important.urgent {background:red;} ~~~ 不出所料，這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此，如果一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配以下元素： ~~~ <p class="important urgent warning">This paragraph is very important.</p> ~~~ 完整的代碼為： ~~~ <!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>無標題文檔</title> <style type="text/css"> .important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;} .important.urgent {background:red;} </style> </head> <body> <p class="important">This paragraph1 is very important.</p> <p class="warning">This paragraph2 is very important.</p> <p class="important warning">This paragraph3 is very important.</p> <p class="important urgent">This paragraph4 is very important.</p> <p class="important urgent warning">This paragraph5 is very important.</p> </body> </html> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559460da9.jpg)