css选择器优先级

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准：
，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。

文章地址：https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 。

他里面讲的css选择器是按照如下的这种方式计算优先级的：

看到上面图我就突然想到css选择器优先级会不会是按照位数来计算的，随后我尝试用11个class去覆盖1个id的样式，但是覆盖失败，所以最初的那种计算方式是错误的，随后我接着查找看到了下面这篇文章：有趣：256个class选择器可以干掉1个id选择器

根据里面的例子在IE下面256个class选择器可以干掉1个id选择器，计算机信息都是以二进制存储的，8位就是00000000-11111111，有2^8种变化，也就是256种变化，那这么说浏览器存储class的形式就是按照位数来进行计算的，但是256个class选择器在非IE下是干不掉1个id选择器，可能是以更大的16位来算吧（或者是做了不溢出的判断），例如上面文章中说到的Opera浏览器。

之所以最初的那种计算方式没有出过错，是因为我们很少去定义这么多的选择器，但是我们还是需要知道一些极限问题，这样更有利于我们进行编码。

所以关于css的优先级计算问题请记住 style > id > class / 属性选择器 / 伪类选择器 > 元素 / 伪元素，不要想着去用 后面的选择器 靠溢出覆盖 前面选择器 的样式，一般采用同级别去覆盖。

例如：

<div style="color: #f00;" id="blue" class="green">123456</div>

body #blue {
    color: #00f;
}
html body .green {
    color: #0f0;
}
div {
    color: #333;
}

color规则	style	id	class	元素
#f00	1	0	0	0
#00f	0	1	0	1
#0f0	0	0	1	2
#333	0	0	0	1

color规则从左侧一列一列作对比，#f00的style为1，其他的为0，所以最终采用样式为#f00，就不再往后考虑。

还有就是CSS规则中如果有多个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素。

以下列出的几种选择器的优先级是不断递增的（以下内容摘自：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）：

1. 类型选择器（也叫元素选择器或者标签选择器，例如 h1）和 伪元素（例如 ::before）
2. 类选择器 (例如 example)，属性选择器（例如 [type=“radio”]），伪类（例如 :hover）
3. ID选择器（例如 #example）
4. 内联样式即直接在标签上面通过style定义的样式
5. !important，当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。当前如果想要覆盖 !important ，也可以通过在样式定义再通过id/class等去覆盖。

通配选择符(*)，关系选择符 (+, >, ~, ’ ') 和 否定伪类(:not()) 对优先级没有影响。（但是在 :not() 内部声明的选择器是会影响优先级）。