CSS元素选择器的运作原理介绍-css教程-PHP中文网

在前端工程师的日常工作中，使用 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：

<p id="p1">
    <p class="a">
        <p class="b">
            ...
        </p>
        <p class="c">
            <p class="d">
                ...
            </p>
            <p class="e">
                ...
            </p>
        </p>
    </p>
    <p class="f">
        <p class="c">
            <p class="d">
                ...
            </p>
        </p>
    </p>
</p>

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

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

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

通过 <p class =“ d”> 中的 .d 来思考，这样的 CSSOM 树在套用样式时，必须对所有的样式规则进行检查，以确认样式规则是否会影响到 .d，到最后才能确定可能会影响到 .d 的样式规则有这三条：

＃p1 .c .d
.f .c .d
.c .d

以此类推，每个 DOM 树上的元素，都必须便利所有的样式规则，才可以取得个别的样式，这样会造成大量冗余的计算，进而严重影响性能。

反过来，如果将前面的 CSS 由右到左进行解析，CSSOM 树则可能会如下：

和前面的例子一样，从 <p class =“ d”> 中 .d 的角度来看，由于会被样式规则影响到的目标元素，已经全都集中在第一层了，所以就不用再去便利整个 CSSOM 树了，甚至只需要检查 .d 以下的子属性变量是否符合实际 DOM 结构，再将所有符合的样式规则重新取回，便能完成 .d 对元素的样式规则套用。

从右到左的解析顺序能够将所有共享的规则路径收拢在一起，当浏览器进行属性比对时，就不用再便利整个 CSSOM 树，大大的减少了无效的比对计算。

也可以换个方式思考：在 HTML 的结构中，一个元素可以有无数个子元素，但只能有一个父元素，由子找父（由下往上）搜寻绝对是比较快的。