CSS选择器权重计算

Jioho 6/30/2020 CSS

# css 权重概念

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

# 普通权重

一般来说，css 的默认权重都是这样：权重从高到低，高的覆盖低权重的 css

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为 style 属性写在元素标签上的内联样式
id 选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

# 复杂场景权重计算方式

在基于普通权重的情况下，css 权重又该如何计算？我们先作出一个假设。注意是假设，用这段数字方便我们理解权重的计算

选择器	行内样式	id 选择器	类，属性选择器和伪类选择器	标签选择器、伪元素
权重值	1000	100	10	1

# 怎么理解这些权重值？

假设现在有一段 css #box .left div{ color:#4e98bb; }
可以想象到 html 结构如下：

<div id="box">
  <div class="left">
    <div>我是被计算的div</div>
  </div>
</div>

1
2
3
4
5

那么这段 css 权重值计算出来是多少？根据上面的对照表，一次得出权重值，然后相加得出：
100(id 选择器) + 10(类选择器) + 1(标签选择器) = 111

# 就这？叫复杂？来点实战

最后 color 渲染了什么颜色？为什么

<style>
  #box .left div {
    color: blue; /*蓝*/
  }
  .box-content .left div {
    color: green; /*绿*/
  }
  #box-content .left div {
    color: purple; /*紫*/
  }
  .left {
    color: red; /*红*/
  }
  .left div {
    color: yellow; /*黄*/
  }
</style>

<div class="box-content" id="box-content">
  <div id="box">
    <div class="left">
      <div>我是被计算的div</div>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

查看答案和计算过程

最后渲染：blue 蓝色

分别计算权重值：

green 绿：2 * class 选择器 = 20
blue 蓝：1 * id 选择器 + 1*class 选择器 + 1*标签选择器 = 111
purple 紫： 1 * id 选择器 + 1*class 选择器 + 1*标签选择器 = 111
red 红：1*class 选择器 = 10
yellow 黄：1*class 选择器 + 1*标签选择器 = 11

按照权重的计算方式：权重最高的就是blue和purple

最后为什么是蓝色？这和 css 顺序无关，和 div 结构有关，在相同的权重下 #box 比 #box-content 更加接近。所以渲染的结果就是蓝色

如果这时候紫色的 class 选择器添加一层，变成： #box-content #box .left div{}。那么渲染的便是紫色，这时候紫色权重才是最高的

# 小结一下

css 最终的计算规则是按权重的，权重最高的那段 css 就会被渲染出来
权重相同情况下，根据 div 的结构，选择最相近的一个选择器的 css 样式进行渲染

# 来一堆例子计算下权重

能说出一下的计算过程吗？

*             {}  /* 0 */
p             {}  /* 1 */
a:hover       {}  /* 20 */
ul li         {}  /* 2 */
ul li+li      {}  /* 30 */
h1+input[type=hidden]{} /* 12 */
ul ol li.active   {}  /* 13 */
#ct .box p        {}  /* 111 */
div#header::after  {}  /* 102 */

/* 行内样式style */
style=""  /* 1000 */

1
2
3
4
5
6
7
8
9
10
11
12

多次出现的选择器相加，可以重复叠加（比如 li+li是相当于 2 个标签选择器计算，这里可以记为 2）
[type=hidden]属于属性选择器，权重比标签选择器还要高
注意区分伪类，和伪元素，伪类的权重比伪元素高

# 如何区分伪类，伪元素？

伪类：:hover 伪元素：::after

伪类并不会添加内容，只是一个样式的补充，通常:hover,:focus 等都是伪类，他们不会改变 html 结构，不会添加节点

伪元素：就好比 after 这种。使用后，必须添加 content 属性，并且 content 属性的内容，会渲染在 html 上，就好像我们真实的 html 元素，只是用 css 添加的

# 总结

以上的计算方式只是作出了假设,真实的 css 计算比这个复杂得多，作出这个假设只是为了方便理解
以后覆盖 css 样式，就可以根据这个规则，适当添加 class 选择器的数量，就可以避免写行内样式或者用 !important 之类的了
除了上述描述的选择器权重，通配符和浏览器的样式默认权重都是最低的，，低的可以忽略不计那种~

有没有最高权重的选择器？

有！<div style="color:red !important;"></div>
能写出这种的，基本都已经被打死了把

最后一个小提示

引入 css 的方式还有一个：@import，在正常情况下，不要使用 import，他会让我们引用的 CSS 文件中的样式覆盖当前的样式。

Jioho 的博客

Choose mode