首页 > 代码库 > CSS选择器
CSS选择器
一、CSS选择器构成
CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等。每个选择器有一条或多条声明,可以同时改变某个标签的一个或多个属性,每个属性和它的值用冒号分开,不同属性之间用分号隔开。
1 h1{ 2 font-family: "楷体"; 3 color: red; 4 }
在上述例子中,h1是选择器,也是html文件中的元素或标签;color、font-family是属性;red、"楷体"是值。
结果:
字体显示为楷体,颜色显示为红色
二、CSS选择器的种类
【通用选择器】
1.写法:*{}
2.作用:选中页面所有标签
*{ color: red; }
结果:所有文字颜色变为红色
【标签选择器】
1.写法:HTML标签名{
样式属性:样式属性;
...
}
2.作用:选中页面所有对应标签
ol{ font-family: "楷体"; color: red; }
结果:对应标签中字体变为楷体,颜色变为红色
【类class选择器】
1.写法:.选择器class名称{}
2.用法:在需要改变样式的标签上使用class="选择器名称",来调用对应选择器
3.作用:修改所有调用选择器的标签
.one{ color: blue; }
结果:class为one的内容文字变为蓝色
【id选择器】
1.写法:#选择器名称{}
2.用法:在需要改变样式的标签上使用id="选择器名称",来调用对应选择器
3.注意事项:同一页面的同一id是唯一的
4.作用:修改唯一id的样式
#two{ font-size: 26px; }
结果:id为two的内容文字字体为26像素
【特殊选择器】
[后代选择器]
1.写法:选择器1 选择器2 选择器3 ...{}
例如:#div .li{}
div .li1{ color: orange; }
[子代选择器]
1.写法:选择器1>选择器2>选择器3...{}
例如:#div>.ul>.li{}
div>ul>.li1{ color: orange; }
注意:子代选择器与后代选择器的不同在于,子代选择器不能隔代。
举个形象的例子,后代选择器:爷爷 我{}
子代选择器:爷爷>爸爸>我{}
[交集选择器]
1.写法:选择器1选择器2...{}
例如: .one#o{} 元素必须同时具备class="和"id=""才能生效
[并集选择器]
1.写法:选择器1,选择器2,...{}
例如:.f,#t{} 元素只需具备class=""或id="" 即可生效
【伪类选择器】
1、写法:选择器名称:伪类状态{}
常见伪类状态:link未访问状态、visited已访问状态、hover鼠标指上状态、active激活选定状态(鼠标点击未松开)、focus获得焦点时状态(inout常用)
2、超链接多种伪类共存时顺序:link(visited)-hover-active
a:link{ color: green; } a:visited{ color: blue; } a:hover{ color: red; } a:active{ color: orange; } input:focus{ color: green; }
结果:当鼠标放上去时显示伪类选择器设置的属性
三、选择器优先级
通用选择器<标签选择器<类选择器<id选择器<伪类选择器
优先级大的可以覆盖优先级小的属性值
CSS选择器