看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算
一、什么是选择器的优先级
既然是深入了解，那么我们肯定先要知道什么是选择器的优先级，这里我就直接引用MDN Web Docs的解释。
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
看概念总是抽象的，最直观的感受就是: 你为页面上的同一个元素设置多个属性，有时候设置的一个样式死活没有生效，这时候您遇到的很可能就是CSS选择器的优先级问题了。
* {
margin: 0;
padding: 0;
}
body .box1{
width: 300px;
height: 300px;
background-color: orange;
}
.box1{
/*样式将无法生效*/
/*因为这个选择器的优先级不够body .box1高*/
background-color: red;
}
<div class="box1">
我的样式涉及到了选择器优先级问题
</div>
二、优先级的计算与比较(一)
那首先我们就必须知道CSS各选择器(这里还一些特殊声明)之间的基础优先级是如何的
!important > 内联样式 > id选择器 > 类/伪类选择器 > 标签/伪元素选择器 > 通配选择器 > 继承的样式
我们可以量化上面说到的选择器基础优先级
!important 9999
内联样式 1000
id选择器 100
类/伪类选择器 10
标签/伪元素选择器 1
通配选择器 0
继承的样式 不存在优先级
那么就能计算出最开始里例子中个个选择器的优先级，从而判断出最终应用的样式
/*优先级为: 1 + 10 = 11*/
body .box1{
width: 300px;
height: 300px;
background-color: orange;
}
/*优先级为: 10*/
.box1{
background-color: red;
}
优先级的计算还具有以下条件:
- 优先级具有可加性
- 选择器优先级不会超过自身最大数量级
- 同等优先级情况下，后写的覆盖前写的
- 并集选择器之间的优先级是独立的
我来为大家一个个解释:
优先级具有可加性
这个很简单就能知道
/*优先级都是能够简单相加的： 11*/
p.box1{
width: 100px;
}
选择器优先级不会超过自身最大数量级
上面我们解释了优先级的可加性，那么有些丧心病狂的人可能就会想，既然优先级能够简单相加，那我直接用多个低优先级的选择器相加不就能够突破优先级的问题？ 我想说:too young, too simple!
/*优先级: 100*/
#box1{
background-color: red;
}
优先级不能超过自身最大量级: 99
/*全是类选择器，优先级为: 90 */
.a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11{
background-color: blue;
}
<div id="box1" class="a1 a2 a3 a4 a5 a6 a7">
我是红色的
</div>
同等优先级情况下，后写的覆盖前写的
#box1{
width: 100px;
}
#box1{
width: 200px;
}
<div id="box1">
宽度为200px
</div>
并集选择器之间的优先级是独立的
/*优先级有两个*/
/* 标签选择器：1 */
/* id选择器： 100 */
p,
#box1{
background-color: orange;
}
优先级的计算与比较(二)
刚刚已经介绍完了第一种选择器优先级的计算方式，不得不说还是比较复杂的。现在就为大家介绍第二种优先级的计算方式，也是我个人比较推荐的一种。
我们假定优先级的计算由A、B、C、D四个项的值来决定
1. 判断是否存在内联样式，存在A=1， 否则A=0
2. B的值是id选择器出现的次数
3. C的值是类选择器出现的次数
4. D的值是标签选择器出现的次数
简单来看两个例子:
#box1 ul > li > a.myClass{
width: 100px;
}
没有内联样式：A=0
一个id选择器：B=1
一个类选择器：C=1
三个标签选择器: D=3
综上，优先级为: 0 1 1 3
#box1 ul > li > a.myClass{
width: 100px;
}
<div id="box1" style="height:100px;"></div>
有内联样式：A=1
一个id选择器：B=1
一个类选择器：C=1
三个标签选择器: D=3
综上，优先级为: 1 1 1 3
优先级已经计算出来了，那么接下来就是如何去比较的问题了:
- 从左到右比较
- 有一个值大于另一个值则比较完毕
- 上面例子中0113与1113比较，第一位的0小于1所以1113的优先级较大
- 如果从左到右全部值相等，则后写的样式覆盖前面写的
写在最后
这是我的第一篇博客，我是一名正在学习前端的小白，有错误的地方希望大家能够多多谅解与指出，一起努力、加油吧!
