You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
有选择器: div.ready #wrapper > .bg-red
先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上,从这个元素的父元素开始向上找,没有找到一个 tagName 为 div 且 class 中有 ready 的元素,就把原来的元素从集合中删去。
至此这个选择器匹配结束,所有还在集合中的元素满足。大体就是这样,不过浏览器还会有一些奇怪的优化。
如图:
注意:
1、为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的 CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况;应用在即使 html 没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
Activity
AnsonZnl commentedon May 20, 2019
先产生一个元素集合,然后从后往前判断;
举个例子
有选择器:

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 commentedon May 28, 2019
学到了,也就是说是从右往左匹配
Konata9 commentedon Aug 31, 2019
上面老哥说的已经很完美了,简单来说就是浏览器对于 CSS 的匹配规则是从右往左进行匹配,这样的的话浏览器的寻找效率会比较高。
blueRoach commentedon Jul 3, 2020
把上面帅哥的话自己说一下
一段CSS选择器,从右到左依次去html里面找,从最开始匹配的元素集合,根据增加的选择器来剔除,得到最终匹配
smile-2008 commentedon Oct 19, 2020
一段CSS选择器,从右到左依次去html里面找,从最开始匹配的元素集合,根据增加的选择器来剔除,得到最终匹配
ConstFiv commentedon Jun 9, 2021
比如说找到匹配的class为“box1”的css,就会先找到所有的含有class=box1的css选择器,再从右到左去检查它的祖先元素路径是否匹配,如果完全匹配就说明配对成功。
Iambecauseyouare commentedon Mar 19, 2023
先产生集合,再从后向前判断