基础选择器的类型

基础选择器

1.选择器的作用

规范了页面中哪些元素能够使用定义好的样式,选择器就是一个条件,符合这个条件的元素,都可以使用定义好的样式

2.选择器的详解

①通用选择器
*{样式声明} 所有元素都要匹配这个样式
尽量少用, 因为效率非常低
css reset 样式重置.由于不同浏览器对同一篇代码的解析有可能不同,需要把一些样式进行统一,或者清除.这种行为就叫做css reset

②标签选择器,元素选择器
一般用于定义某种元素的共用样式
元素名称{样式声明}
页面中所有对应元素,都要应用这个样式

③id选择器
只对当前页面中,一个标签生效
一般项目中id选择器,单独使用比较少,
项目中#id选择器通常用于后代和自带选择器的第一部分
<p id="p1"> #p1{样式声明}

④类选择器
定义页面上的一个样式片段,哪个元素要用,就是用class调用,可以不停的被调用
.类名{样式声明} 声明类名有点
<a class="类名"> 调用类名没有点
类选择器的特殊使用方式
1.多类选择器,一个class,引用多个类名
<p calss="text-blue bg-red">类选择器</p>
2.分类选择器
①标签选择器.类选择器{样式声明}
调用这个类名的这个标签,应用这个样式,提升权值
② .类选择器 .类选择器{样式声明}
同时引用了这两个类选择器的标签,应用这个样式
注意,类名的定义规则
1.定义类选择的时候,点不能省略
2.类名不能以数字开头
3.只能包含-_
4.见名知意

⑤.群组选择器
选择器1,选择器2,选择器3,选择器4…{样式声明}

⑥.后代选择器
元素的后代关系,匹配元素
后代关系,一级或者多于一级的嵌套
选择器1 选择器2 选择器3…{样式声明}

⑦.子代选择器
通过元素的子代关系,匹配元素
子代关系,一级的嵌套
选择器1>选择器2>选择器3…{样式声明}
后代选择器和子代选择器可以混写
比如 #d1 p>span{} #d1 >p span{}

⑧.伪类选择器
匹配元素不同状态下的样式
1.链接未被访问时的状态
:link{样式声明}
2.链接已访问的状态
:visited{样式声明}
3.鼠标悬停时的状态
:hover{样式声明}
4.元素被激活时的状态
:active{样式声明}
5.元素获取焦点时的状态
::focus{样式声明}

⑨选择器权值问题
!important >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器* 0
继承的样式 无
权值:表示当前选择器的重要程度,权值越大优先级越高
特点:
1.当一个选择器中含有多个选择器时,需要将所有选择器的权值进行相加,结果越大优先级越高
2.权值相同,使用就近原则
3.群组选择器权值不能相加,单独计算
4.样式后面添加了!important 直接获得最高权值,内联样式不能添加!important
权值计算结果不能超这个权值的最大数量级(一百个1相加,也比10小)