[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？

有选择器：
div.ready #wrapper > .bg-red
先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 div 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。
如图：
11558321348_ pic
注意：1、为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况；应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。2、为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？相关推荐

html计数器自动编号,css如何使用计数器给元素自动编号？css计数器的使用（代码示例）...
css如何使用计数器给元素自动编号?本篇文章就给大家介绍设置和使用css计数器的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[css计数器(counter)是什 ...
CSS浏览器兼容总结篇
CSS浏览器兼容总结篇前言:本篇文章的大部分知识点来自于清华大学出版社的<DIV+CSS网页样式与布局实战详解>,我在书本内容的基础上添加了自己所了解的一些知识,有兴趣的伙伴可以去买正版 ...
css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
CSS 利用@media screen判断识别手机/PC端浏览器
一.写此篇的初衷: 手机用户常可以更换自己手机系统的字体,那么在浏览网页的时候,网页内容字体也都随之变了,于是我想,能不能让自己的网站的字体在手机浏览器中保持不变(使用一款自定义字体)呢:而在PC端浏 ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
最全的CSS浏览器兼容问题整理
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTY ...
CSS浏览器兼容汇总
原文:http://www.52css.com/article.asp?id=1026 从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下. 对于web2.0的过度,请尽量用xhtml ...
[转] getBoundingClientRect判断元素是否可见
getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视 ...

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？

个人简介

主目录

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？相关推荐

最新文章

热门文章