Skip to main content

浏览器是如何判断元素是否匹配某个 CSS 选择器?

CSS 选择器的匹配算法是从右到左,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(子节点)

而从左向右的匹配规则的性能都浪费在了失败的查找上面。

打个简单的比方,孩子只有一个父亲,但是父亲可以有很多个孩子,从孩子找父亲简单,从父亲找某个指定的孩子可能就会找到错误的孩子。

举例法(查找 span 节点)

.mod-nav h3 span

image.png

先找到所有的 span,沿着 span 的父元素查找 h3,中途找到了符合匹配规则的节点就加入结果集;如果直到根元素 html 都没有匹配,则不再遍历这条路径,从下一个 span 开始重复这个过程(如果有多个最右节点为 span 的话)。

参考文章:https://www.jianshu.com/p/a0e9522ddcf7