css选择器优先级

约定不等于承诺〃 2022-05-15 17:59 229阅读 0赞

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

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

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

看到上面图我就突然想到css选择器优先级会不会是按照位数来计算的，随后我尝试用11个class去覆盖1个id的样式，但是覆盖失败，所以最初的那种计算方式是错误的，随后我接着查找看到了下面这篇文章：[有趣：256个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 / 属性选择器 / 伪类选择器 > 元素 / 伪元素，不要想着去用 后面的选择器 靠溢出覆盖 前面选择器 的样式，一般采用同级别去覆盖。

例如：

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

<table> 
 <thead> 
  <tr> 
   <th>color规则</th> 
   <th>style</th> 
   <th>id</th> 
   <th>class</th> 
   <th>元素</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>#f00</td> 
   <td>1</td> 
   <td>0</td> 
   <td>0</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>#00f</td> 
   <td>0</td> 
   <td>1</td> 
   <td>0</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>#0f0</td> 
   <td>0</td> 
   <td>0</td> 
   <td>1</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>#333</td> 
   <td>0</td> 
   <td>0</td> 
   <td>0</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

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

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

以下列出的几种选择器的优先级是不断递增的（以下内容摘自：[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity][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() 内部声明的选择器是会影响优先级）。

[css]: /images/20220503/c7eeff0972a64ef8bcb7a600c2422d15.png
[https_hacks.mozilla.org_2017_08_inside-a-super-fast-css-engine-quantum-css-aka-stylo]: https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/
[css 1]: /images/20220503/15140ef2a79446638792ea6f2d24972c.png
[256_class_1_id]: https://www.zhangxinxu.com/wordpress/2012/08/256-class-selector-beat-id-selector/
[https_developer.mozilla.org_en-US_docs_Web_CSS_Specificity]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity