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

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

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

浏览器渲染

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

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 树:

相关推荐