css权重优先级

关于css权重优先级

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

浏览器渲染过程

在说到css解析器之前，我们需要先熟悉下浏览器的渲染过程

1. html通过HTML Parser转化成DOM Tree
2. css通过CSS Parser转化成CSSOM Tree
3. 整合css和html两个tree为render Tree
4. 根据Layout(重排)计算出DOM节点在网页中的位置和宽高排布
5. 浏览器根据render Tree和Layout利用GUI线程进行渲染展示（重绘）

与css解析器相关，我们先重点看第3步：整合css和html两个tree为render Tree。这个整合过程，实际上是在每个DOM节点上遍历CSS样式，最终生成每个节点的样式规则。

css解析选择器的方向：从右到左

为什么要从右到左 ?

为了解释这个问题，我们先来看一段代码和对应的css选择器

<div class="col">
  <div class="a">
      <div class="b">
        <div class="c">
      </div>
  </div>

  <div class="b">
      <ul class="d">
        <li>1</li>
        <li class="c">2</li>
        <li>3</li>
        <li>4</li>
      </ul>
  </div>
</div>

.col .a .b { color: #f00; }
.col .b .c { color: #0f0; }
.b .c { color: #00f; }

如果从左到右，遍历方式如下：

某个DOM节点的选择器以.col .a .b为例，

• 先遍历所有CSSOM节点，找到所有col
• 再遍历col所有后代节点，找到所有的a
• 再遍历所有a的后代节点，找到所有的b

如果从右到左，遍历方式如下：

节点对比从左到右减少了，是因为有公共节点，从右到左，只要有公共，就能共用，这样公共样式就很容易集合到同一分支上

某个DOM节点的选择器以.col .a .b为例，

• 先遍历所有CSSOM节点，找到所有的b
• 以b为基准，找上层的a
• 以a为基准，找上层的col

这种遍历方式，只用遍历一次，然后判断上层节点是否匹配即可。

从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是DOM元素的父节点，而从左往右进行匹配的时候时候，匹配的全部是DOM元素的子节点，这样就避免了HTML与CSS没有下载完需要进行等待的情形。

由此也可以等到一个优化重绘的结论：避免不必要的复杂的 CSS 选择器，尤其是后代选择器，因为为了匹配选择器将耗费更多的 CPU。