Skip to content

[css] 第34天 浏览器是怎样判断元素是否和某个CSS选择器匹配? #123

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

AnsonZnl

AnsonZnl commented on May 20, 2019

@AnsonZnl
Contributor

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

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

举个例子

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

注意:

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

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

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

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

Konata9

Konata9 commented on Aug 31, 2019

@Konata9

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

blueRoach

blueRoach commented on Jul 3, 2020

@blueRoach

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

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

smile-2008

smile-2008 commented on Oct 19, 2020

@smile-2008

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

ConstFiv

ConstFiv commented on Jun 9, 2021

@ConstFiv

比如说找到匹配的class为“box1”的css,就会先找到所有的含有class=box1的css选择器,再从右到左去检查它的祖先元素路径是否匹配,如果完全匹配就说明配对成功。

Iambecauseyouare

Iambecauseyouare commented on Mar 19, 2023

@Iambecauseyouare

先产生集合,再从后向前判断

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@blueRoach@tzjoke

        Issue actions

          [css] 第34天 浏览器是怎样判断元素是否和某个CSS选择器匹配? · Issue #123 · haizlin/fe-interview