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” 表明“重要的”，可能有不少。