CSS系列(7)CSS类选择器Class详解
2014-08-29 23:45
113 查看
这一篇文章,以笔记形式写。
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 都不能正确地处理多类选择器。
不过,我在IE6、7、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” 代表“重要的”,可能有很多。
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 都不能正确地处理多类选择器。
不过,我在IE6、7、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” 代表“重要的”,可能有很多。
相关文章推荐
- overflow属性 -- css属性详解系列(2)
- CSS系列(6) CSS通配符详解
- div+css中id和class的区别运用详解
- CSS系列(8) CSS后代选择器和子选择器详解
- transform属性 -- css属性详解系列(3)
- Java字节码详解系列之一--class文件格式简介
- jQuery addClass(), removeClass(),toggleClass(),css()方法使用详解
- CSS书写方法二 class与id详解
- css 中多个class选择器的详解
- Windows NT 内核操作系统(2000、XP系列)部分常见蓝屏死机代码详解
- CSS教程(六) DW4中CSS属性详解
- Class文件详解 (2)
- ActionScript 3.0系列教程(3):Document Class特色为我们带来了什么?
- UPnP系列之一——UPnP术语详解
- XML系列函数详解
- CSS循序渐进系列
- C++虚函数系列之一:统计class中虚函数的个数
- 详解 Tomcat: The value for the useBean class attribute is invalid 问题
- CSS中table-layout属性的作用及使用详解
- CSS使用详解