看完就懂--CSS选择器优先级的计算

• 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;
}

优先级的计算还具有以下条件:

1. 优先级具有可加性
2. 选择器优先级不会超过自身最大数量级
3. 同等优先级情况下，后写的覆盖前写的
4. 并集选择器之间的优先级是独立的

我来为大家一个个解释:

优先级具有可加性

这个很简单就能知道
/*优先级都是能够简单相加的： 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

优先级已经计算出来了，那么接下来就是如何去比较的问题了:

1. 从左到右比较
2. 有一个值大于另一个值则比较完毕
   1. 上面例子中0113与1113比较，第一位的0小于1所以1113的优先级较大
3. 如果从左到右全部值相等，则后写的样式覆盖前面写的

---

写在最后

这是我的第一篇博客，我是一名正在学习前端的小白，有错误的地方希望大家能够多多谅解与指出，一起努力、加油吧!