CSS系列（7）CSS類選擇器Class詳解

這一篇文章，以筆記形式寫。

 

1，  CSS 類選擇器詳解

http://www.w3school.com.cn/css/css_selector_class.asp

知識點：

(1)    使用類選擇器的前提是給標籤添加上類屬性，好比<p class="important"></p>

(2)    類選擇器的語法爲：*.important {color:red;}，不過通常省略前面的通配符選擇器，寫成 .important {color:red;}，這樣就會給全部帶有class="important"的標籤添加樣式。

(3)    給具備某類class的標籤應用樣式，好比 p.important {color:red;} 這裏只會匹配標籤爲p且class=」 important」的元素。

(4)    給一個標籤設置多個類，這些類的樣式都會應用到這個標籤上。好比：

<p class="important warning">

This paragraph is a very important warning.

</p>

P標籤同時具備類important和warning，不分先後。

 

樣式爲：

.important {font-weight:bold;}  設置爲粗體

.warning {font-style:italic;}   設置爲斜體

這個段落p就會同時是粗體和斜體。

 

(5)講兩個類寫到一塊兒，不分先後順序，就會匹配同時包含兩個類的元素，好比：

.important.warning {background:silver;} 設置背景爲銀色

這個選擇器會匹配同時具備類important和warning的元素。

 

(6)第4和第5就是所謂的」多類選擇器」，文章中說， IE7 以前的版本中，不一樣平臺的 Internet Explorer 都不能正確地處理多類選擇器。

不過，我在IE六、七、8上測試過，都沒有問題。

 

 

2，  類選擇器class和ID選擇器的差異

http://www.w3school.com.cn/css/css_selector_id.asp

知識點：

(1)    ID選擇器只能在文檔中使用一次

能夠搜索文章【爲何html標籤的id必須惟一】

 http://jingyan.baidu.com/article/fea4511a732139f7bb912529.html

(2)    不能使用 ID 詞列表，即不能像多類選擇器那樣 .red.bold 能夠選擇同時具備類red和bold的標籤，#red#bold這是不容許的。

(3)    ID 能包含更多含義，好比id= 「mostImportant」 表明是「最重要的」，這是惟一的；而class=」 important」 表明「重要的」，可能有不少。