一张图搞定CSS选择器的优先级
0 总览
如果发生CSS的冲突问题, 即A样式与B样式冲突
1 首先比较CSS样式的来源
不同的来源有不同的优先级
如果来源相同, 即同源时, 则进入下一阶段
2 比较是否为内联样式
如果A样式与B样式同源,
但是A样式为内联样式, 则使用A样式
如果AB都为内联样式或都是外部样式, 则进入下一阶段
3 比较选择器的优先级
一个html标签可以由不同的方法使用不同的选择器选中
而不同的选择器又有不同的优先级
通过比较他们的优先级确定使用A还是使用B
4 比较出现顺序的先后次序
当然优先级可能也相同
如果到这一步都相同的话,
那么就认为这两个样式等级相同
此时按照源码出现的顺序进行覆盖
即:
如果A的声明在B之后, 则使用A
如果B的声明在A之后, 则使用B
冲突的建立:
应当建立在某个确定的元素上, 即对同一个元素的同一个属性发生了冲突
注意, 同一个元素并非指同一种元素
1 来源
用户代理样式与作者样式
1 自己设置的(或自己引用的): 作者样式
例如自己在style标签里的样式, 或者用链接引入的样式等
2 网站默认的: 用户代理样式
即浏览器默认的样式
写个东西你没给样式, 浏览器就按自己定好的样式来
一般这种样式只会有最基本的东西, 最基础的颜色等
网页样式应当掌握在网页的作者手中, 所以作者的样式的优先级应当大于浏览器默认的样式
但浏览器也必须有自己的默认样式, 否则作者没给样式就无法展示
用户样式
还有一种样式等级:
浏览器可能有登录功能, 不同的用户可以设置自己的默认样式
这种样式的等级处于刚才两种的之间
因为如果等级高于作者样式, 那么网页作者无法掌握自己的页面展现在使用者时的样子
如果低与浏览器样式那么设置了等于白设置
一般不做讨论
!important
这个一般在作者样式种出现
如果出现这个那么就提升为更高的优先级
总结
等级如下:
- !important 作者样式
- 作者样式
- 用户样式
- 用户代理样式(浏览器默认样式)
2 内联样式与外部样式
内联样式即设置在html的style属性当中的样式
又称行内样式
其专门为该元素服务, 直接作用于所在的元素
没有选择器
所以内联样式等级比外部样式高
3 选择器优先级
id选择器 > 类选择器 > 标签选择器
这其实是按精确度进行的划分
id选择器 类似于身份证号,
一个人只有一个, 直接代表了一个具体的人(元素)
类选择器 类似于一类人,
代表一个你自己用具体词语描绘的一个群体,
对比于人可以类似于学生, 家长, 父母离婚的孩子等, 这个群体可能很大也可能只有一两个人
其实也就是网页作者根据情况设置的元素的集合
标签选择器 类似于默认的人种,
如非洲人, 中国人, 黑人等等,
在CSS里相当于已经被html固定好的元素的种类
如果A与B两个样式冲突需要使用选择器优先级来判断时
- 首先判断二者的id选择器数量, 多的直接胜出
- 如果id选择器数量一样, 那么判断类选择器数量, 多的直接胜出
- 如果id与类选择器数量都一样, 那么判断标签选择器数量, 多的直接胜出
由上面可见:
1个id选择器>0个id选择器+ 任意多个类选择器
所以我们比较时应当从id选择器数量开始比较,一旦数量不同直接可以判断
一般判断也可以对冲突的两个样式设置三个数a,b,c
分别代表id,类,标签选择器数量
依次比较两个样式的a,b,c即可
注意:
伪类选择器和属性选择器与一个类选择器的权重一致
通用选择器(*)与组合选择器(>+~)对优先级没有影响
因为他们其实是对不同的元素一起使用样式, 而不属于对同一个元素产生样式的叠加而产生冲突
4 出现顺序
如果以上全部相同, 说明两个样式的等级一致
那么应当按照出现的先后进行确定最终样式
毕竟新的替换旧的嘛
5 本文总结
本文从一个流程图开始, 详细说明了样式产生冲突时的处理流程
而一些避免冲突或者解决冲突的技巧都是在这种判断的基础上建立来的
先要了解冲突产生时是如何确定最终样式的, 才能知道如何处理
很多文章都是直接说各类选择器的权重, 并不系统, 也不够规范
使用如上流程或许会略微复杂, 但是一步一步清晰明了, 熟练后更得心应手
希望本文对你能够有帮助
6 引用
图片引自 深入解析CSS
本文也建立在此书之上
有兴趣的可以看看这本书
侵删