选择器的分类及其优先级

选择器
1) 基本选择器
标签选择器
含义：根据指定的标签名，在当前文件中找到所有该名称的标签，设置属性
格式：
标签名 {
样式名:样式值
}
注意：
1. 标签选择器选中的是当前文件中所有的标签, 而不能单独选中某一个标签
2. 标签选择器无论标签藏得多深都能选中
3. 只要是HTML中的标签就可以作为标签选择器

2）类选择器
含义: 根据指定的类名找到对应的标签, 设置属性
格式:
.类名{
属性:值;
}
注意:
1. 在同一个文件中的class可以重复
2. 使用class选择器时要在class前面加上.
3. 类名的命名规范和id名称的命名规范一样
4. 在HTML中每个标签可以同时绑定多个类名
格式:

错误的写法:

3）id选择器
含义：根据指定的id找到对应的标签，设置属性
格式：
#id {
样式名:样式值
}
注意：
1. 在同一个文件中的id不可以重复
2. 使用id选择器时要在id前面加上#
3. id有一定的规范
id的名称只能由字母/数字/下划线
a-z 0-9 _
id名称不能以数字开头
id名称不能是HTML标签的名称
4）逗号选择器
含义: 同时给多个选择器选中的标签设置属性
格式:
选择器1,选择器2{
样式名:样式值
}
注意:
1. 逗号选择器使用,来连接
2. 选择器可以使用标签名称、id、class
5）组合选择器【了解】
含义: 给同时具备多个选择器的标签设置属性
格式:
选择器1选择器2{
样式名:样式值;
}
注意:
1. 选择器和选择器之间没有任何的连接符号
2. 选择器可以使用标签名称、id、class
6）普遍选择器
含义: 给当前文件所有的标签设置属性
格式:
* {
样式名:样式值;
}
2.层次选择器
子代选择器
含义: 找到指定标签中所有的直接子元素, 设置属性
格式:
标签名称1>标签名称2{
样式名:样式值;
}
先找到所有名称叫做"标签名称1"的元素, 然后在这个标签中查找所有第一代子元素名称叫做"标签名称2"的元素
注意:
1. 子元素选择器只会查找第一代子元素, 不会查找被嵌套的元素
2. 子元素选择器之间需要用 > 连接
后代选择器
含义: 找到指定标签的所有的后代元素, 设置属性
格式:
标签名称1 标签名称2{
样式名:样式值;
}
先找到所有名称叫做"标签名称1"的元素, 然后再在这个元素下面去查找所有名称叫做"标签名称2"的元素, 然后在设置属性
注意:
1. 后代选择器必须用空格隔开
2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
兄弟选择器
1. 相邻兄弟选择器
含义: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值;
}
注意:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
2. 通用兄弟选择器
含义: 给指定选择器后面的选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
注意:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
3. 属性选择器
含义: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
找到所有具有该属性名的标签, 设置属性
[attribute=value]
找到所有属性值为value的标签, 设置属性
[attribute^=value]
找到所有以value开头的标签, 无论有没有被-隔开
[attribute$=value]
找到所有以value结尾的标签
[attribute~=value]
找到拥有独立value的标签, value不可以和其他属性连接
[attribute*=value]
只要包含value就可以找到
最常见的应用场景, 用于区分input
input[type=password] {
}
4. 伪类选择器
在选择器的后面使用: 用于添加特殊的效果
1）与子元素相关
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
2）与状态相关
:link 未访问的链接
:hover 鼠标悬浮时的元素
:active 激活链接
:visited 已访问的链接
:focus 聚焦时
5. 伪元素选择器
在选择器的后面使用:: 用于添加元素
::after
::before
选择器优先级【级联】
1. !important
优先级最高，不推荐
2. 特性值
1000 内联style属性
100 id
10 类名选择器、伪类选择器、属性选择器
1 标签选择器、伪元素选择器
3. 代码顺序
如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高

选择器的分类及其优先级相关推荐

CSS选择器权重计算与优先级
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级. 一:优先级等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元 ...
CSS选择器分类与优先级
详见附件转载于:https://blog.51cto.com/xiaoxiaojinya/1948308
html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
Maven仓库的分类及优先级
1.仓库的分类 maven的仓库主要是用于存储及管理项目中所依赖的组件.可分为本地仓库和远程仓库,远程仓库有可以细分为中央仓库.私有仓库,中央仓库主要是由maven的开发团队负责开发管理的一些公共组件 ...
前端学习笔记：CSS3选择器的继承、优先级和重要性
一.样式的继承 1.什么叫"继承"? 继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p ...
html中css选择器的分类,CSS选择器分类
CSS选择器分类标签(空格分隔): CSS 选择器标签选择器标签选择器:html代码中的标签.例如:html.form.span 为p标签设置12px字号,行间距设置1.6em的样式: p{ f ...
css选择器有哪些，选择器的权重的优先级
选择器类型: 1.ID #id 2.class .class 3.标签 p 4.通用 * 5.属性 [type="text"] 6.伪类 :hover 7.伪元素 ::first- ...
关于中断的分类和优先级（优先级由高到低排序）
1.机器校验中断:高速程序发生了设备故障,比如电源故障,主存出错等 2.访馆中断:用户程序需要操作系统接入,调用操作系统服务等 3.程序性中断:包括指令和数据的格式错误,程序执行中出现异常等 4.外部 ...
前端面试超全整理0（html css）
1.CSS盒子模型与怪异盒模型 1.****标准盒模型中width指的是内容区域content的宽度:height指的是内容区域content**的高度. 标准盒模型下盒子的大小 = content ...

选择器的分类及其优先级

选择器的分类及其优先级相关推荐

最新文章

热门文章