CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?

浏览器渲染

我们先看一下浏览器的渲染步骤：

CSS 在被浏览器加载后，会被解析成 CSSOM 树，并尝试与 Dom 叠加成渲染树，随后进行计算位置、渲染等步骤。这样看来，CSS 属性套用的关键就在于如何从 CSS 转化成 CSSOM 树，以及怎么把 CSSOM 套用到 DOM 上去。

CSSOM树

当我们写下一组 CSS 样式时，例如：

#id .class h4 + p { 
   ... 
} 

浏览器在解析它时，你可能会认为 CSS 会按照由左到右的依序找出#id>.class>h4>p，最后套用，但实际上浏览器解析 CSS 的顺序是由右到左的 p>h4>.class>#id。

很违背直觉对吧?但如果考虑到性能问题，从右到左的解析会比从左到右强很多。

假设这有这样的 HTML：

<div id="div1"> 
    <div class="a"> 
        <div class="b"> 
            ... 
        </div> 
        <div class="c"> 
            <div class="d"> 
                ... 
            </div> 
            <div class="e"> 
                ... 
            </div> 
        </div> 
    </div> 
    <div class="f"> 
        <div class="c"> 
            <div class="d"> 
                ... 
            </div> 
        </div> 
    </div> 
</div> 

以及这边五条 CSS 样式规则：

#div1 .c .d {} 
.f .c .d {} 
.a .c .e {} 
#div1 .f {} 
.c .d {} 

让我们模拟一下，如果把 CSS 从左到右解析，将会生成类似这样的 CSSOM 树：