浏览器如何解析css选择器？
2024-09-02 13:06:55
浏览器会『从右往左』解析CSS选择器。
我们知道DOM Tree与Style Rules合成为 Render Tree，实际上是需要将Style Rules附着到DOM Tree上，
因此需要根据选择器提供的信息对DOM Tree进行遍历，才能将样式附着到对应的DOM元素上。
以下这段css为例
<style type="text/css">
.mod-nav h3 span {font-size: 16px;}
</style>
若从左向右的匹配，过程是：
从 .mod-nav 开始，遍历子节点 header 和子节点 div
然后各自向子节点遍历。在右侧 div 的分支中
最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，一颗DOM树的节点动不动上千，这种效率很低。
如果从右至左的匹配：
先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3
由 h3再向上寻找 class="mod-nav" 的节点
最后找到根元素 html 则结束这个分支的遍历。
后者匹配性能更好，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。
最新文章
- SVN使用教程之-分支/标记 合并 subeclipse （转）
- ASP.NET Repeater 控件分页
- add number
- Codeforces Round #200 (Div. 1) D. Water Tree（dfs序加线段树）
- C#获取内网和外网IP
- JavaScript之Array常用函数汇总
- How to Write and Publish a Scientific Paper: 7th Edition（科技论文写作与发表教程）（11.04更新）
- laravel Event执行顺序
- mysql数据库文件默认保存目录（windows）
- IDEA 16注册
- Android 下得到 未安装APK包含信息 等
- 一种基于路网图层的GPS轨迹优化方案
- inode索引详解
- Azure登陆的两种常见方式(user 和 service principal登陆)
- 通过Mysql连接ASP.Net Core2.0(Code First模式)
- zabbix修改Template OS Linux模版使已使用内存(Used memory)更准确
- asp.net文件压缩，下载，物理路径，相对路径，删除文件
- Learning How To Code Neural Networks
- Python fabs() 函数
- [javaSE] 多线程通信（等待-唤醒机制）