Fe-interview: [css] 第34天 浏览器是怎样判断元素是否和某个CSS选择器匹配？

[haizhilin2013]

第34天 浏览器是怎样判断元素是否和某个CSS选择器匹配？

[AnsonZnl]

先产生一个元素集合，然后从后往前判断；

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

举个例子

有选择器：
div.ready #wrapper > .bg-red
先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id不为 #wrapper则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 div 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。
如图：

注意：

1、为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况；应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。

2、为什么是用集合主要也还是效率。基于CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

[tzjoke]

学到了，也就是说是从右往左匹配

[Konata9]

上面老哥说的已经很完美了，简单来说就是浏览器对于 CSS 的匹配规则是从右往左进行匹配，这样的的话浏览器的寻找效率会比较高。

[blueRoach]

把上面帅哥的话自己说一下

一段CSS选择器，从右到左依次去html里面找，从最开始匹配的元素集合，根据增加的选择器来剔除，得到最终匹配

[MrZ2019]

一段CSS选择器，从右到左依次去html里面找，从最开始匹配的元素集合，根据增加的选择器来剔除，得到最终匹配