浏览器如何判断网页元素具体的CSS选择器

从后往前判别。

阅读器先发生一个元素集合，这个集合往往由最后一个局部的索引发生（假设没有索引就是一切元素的集合）。然后向上婚配，假设不契合上一个局部，就把元素从集合中删除，直到真个选择器都婚配完，还在集合中的元素就婚配这个选择器了。

举个例子，有选择器：

body.ready #wrapper > .lol233

先把一切 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，假设元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素末尾向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。

至此这个选择器婚配完毕，一切还在集合中的元素满足。

大体就是这样，不过阅读器还会有一些奇异的优化。

为什么从后往前婚配由于效率和文档流的解析方向。效率不用说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是由于如今的 CSS，一个元素只需确定了这个元素在文档流之前出现过的一切元素，就能确定他的婚配状况。运用在即使 html 没有载入完成，阅读器也能依据曾经载入的这一局部信息完全确定出现过的元素的属性。

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