1,CSS选择器
-
作用:
规范了页面有哪些元素能够使用声明好的样式。
目的:为了匹配页面的元素。 -
选择器详情:
-
1.元素选择器
特点:由标记名称作为选择器。主要匹配页面中指定的标记所对应的所有元素。 语法:
标记{
属性:值;
属性2:值2;
。。。
}
-
2.类选择器
特点:允许被任意元素所引用的选择器
语法:
1.声明
.类名{
属性:值;
。。。
}
2.引用
<标记 class=‘类名字’>(引用不用加.)
特殊用法:
1.分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用,为了实现对某种元素的不同样式的细分控制。
语法:
元素选择器.类选择器{
属性:值;
。。。
}
ex:
.
a{
类选择器,匹配所有的class为a的元素
}
div{
元素选择器,匹配所有div元素
}
div.a{
匹配class为a的div元素
}
2.多类选择器的使用方式,
允许让一个元素同时引用多个类选择器,多个类选择器之间使用 空格 隔开。
.c1{...}
.c2{...}
.c3{...}
<标记 class="c1 c2 c3">
3.伪类选择器
1.作用
匹配元素不同状态的选择器
ex:超链接a元素,具备四个状态
状态1:连接未被访问是的状态
状态2:鼠标悬停在元素上的状态
状态3:当元素被激活时
状态4:当访问过后的时候。
2.语法
:伪类状态
通常会配合其他元素一起使用。
选择器:伪类状态{。。。}
选择器:匹配元素
:伪类状态:匹配状态。
1、连接伪类
1、:link
匹配超连接未被匹配的状态。
2.:visited
匹配超链接打开后的状态。
2、动态伪类
1.:hover
匹配悬停在元素上边的状态。
2.:active
匹配元素被激活时候的状态。
3.:focus
匹配获取焦点时候的状态。
(文本框和密码框使用居多)
4.id选择器
1、ID的作用
在HTML中,每个元素都允许设置一个ID属性,主要用于表示该元素在网页中独一无二的标识。
#ID值{属性:值;}
EX:
#main{
color:red;
}
5.
群组 选择器
1.作用
定义多个选择器的共同样式
定义方式是一个以,隔开的选择器列表。
2.语法
#main,p,div.span,.redColor{
color:red;
}
等同于:
#main{color:red;}
p{color:red;}
div.span{color:red;}
.redColor{color:red;}
6.后代选择器
1.作用
依托于原色的后代关系来匹配元素(不限制层级)
2.语法
选择器1 选择器2{。。。}
7.子代选择器
1.作用
依托于元素的子代关系来匹配元素(是由一层关系)
2.语法
选择器1>选择器2{。。。}
3.选择器的优先级
当多个选择器能够同时应用到统一元素上时候,并且样式发生冲突的话,则要按照不同选择器的优先级来应用样式。
选择器的优先级看 "权值"
选择器 取值
元素选择器 1
类/伪类 10
ID选择器 100
内联方式 1000