一、选择器的作用
选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
二、选择器的分类
选择器大体上可以分为两类:基本选择器、高级选择器及其它选择器
基本选择器:
基本选择器中包括:标签选择器、id选择器与类选择器。
1.标签选择器:
标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“
1 body{ 2 color:gray; 3 font-size: 12px; 4 } 5 /*标签选择器*/ 6 p{ 7 color: red; 8 font-size: 20px; 9 } 10 span{ 11 color: yellow; 12 }
2.id选择器:
在使用id选择器到时候需要注意一下三点:
(1)同一个页面中id不能重复。
(2)何的标签都可以设置id
(3)id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1 1 #box{ 2 2 background:green; 3 3 } 4 4 5 5 #s1{ 6 6 color: red; 7 7 } 8 8 9 9 #s2{ 10 10 font-size: 30px; 11 11 }
3.类选择器:
类选择器在使用前需要在标签中加入class类=" ",在style样式中需要 "." + 类名来使用
1 .lv{ 2 color: green; 3 4 } 5 .big{ 6 font-size: 40px; 7 } 8 .line{ 9 text-decoration: underline; 10 11 }
公共类的简化使用:
1 <div> 2 <p class="lv big">段落1</p> 3 <p class="lv line">段落2</p> 4 <p class="line big">段落3</p> 5 </div>
高级选择器:
高级选择器中包括:子代选择器、后代选择器、并集选择器和交集选择器.
1.子代选择器:
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{ 2 color: yellowgreen; 3 }
2.后代选择器:
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
1 .container p{ 2 color: red; 3 } 4 .container .item p{ 5 color: yellow; 6 }
3.并集选择器:
这种选择器比较常见,用起来也很方便,只在多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
1 a,b,c,d{ 2 color: #008000; 3 text-decoration: none; 4 5 }
4.交集选择器:
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
比如有一个<h4 class='active'></h4>这样的标签。它表示示两者选中之后元素共有的特性。
1 h4{ 2 width: 100px; 3 font-size: 14px; 4 } 5 .active{ 6 color: red; 7 text-decoration: underline; 8 } 9 /* 交集选择器 */ 10 h4.active{ 11 background: #00BFFF; 12 }
其他选择器: