前端三十｜05. [CSS] 元素選取器是如何運作的？

在前端工程師的日常中，使用元素選取器是稀鬆平常的事情；無論你是撰寫一般的 CSS，或是需要過編譯的 SASS、SCSS、LESS，最終都仍會被編譯成一行一行的 CSS 樣式屬性，交給瀏覽器解析、套用；但你有沒有想過這件事情是如何實現的呢？

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

瀏覽器渲染

我們先複習一下前幾天提過的瀏覽器渲染步驟：

image by faressoft

我們撰寫的 CSS 在瀏覽器載入後，會被解析成 CSSOM Tree，並嘗試與 Dom 疊加成 Render Tree，隨後進行計算位置、渲染等步驟；這樣看來， CSS 屬性套用的關鍵就在於如何從 CSS 轉化成 CSSOM Tree，以及怎麼把 CSSOM 套用到 DOM 上去了。

別急，讓我們繼續看下去。

CSSOM Tree

當我們寫下一組 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">…