浏览器对CSS选择符的解析居然是从右往左的！

最新推荐文章于 2023-03-17 20:22:59 发布
最新推荐文章于 2023-03-17 20:22:59 发布
阅读量570 收藏
点赞数
分类专栏： IT CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36060786/article/details/79321405
版权
IT 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
CSS
6 篇文章 1 订阅
订阅专栏

浏览器对CSS选择符的解析居然是从右往左的！没想到吧，这可能颠覆了大多数人以往的认知，也包括我哭。

之前写css选择器的时候无论表示的该元素有没有特定的class或id标签总是喜欢加上父级，甚至极父级的父级，（一直觉得只要选择符不超过3,4个就应该差不多了）现在想想都阔怕，如果该元素本身就能唯一表示，那浏览器只要查找一次ok啦，那它之前的选择符查找岂不是白搭，可怕，吓得我赶紧去改代码哭

QPQ_
关注
专栏目录
为什么解析 CSS 选择器时一定要从右往左解析
好记性不如烂笔头~
05-21 635
为什么解析 CSS 选择器时一定要从右往左解析？ 今天逛论坛时无意中看到这个熟悉的命题。勾起了一段心酸的往事，记得刚毕业面试时被这个问题ko过。今天总结一下算是祭奠下当年那个菜鸟的我。 首先来了解下页面是如何渲染的：首先浏览器会把HTML文档解析为DOM tree，然后解析CSS为CSS tree，接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree，最终用来绘...
css样式书写顺序及原理
weixin_46505015的博客
04-04 1601
浏览器对 CSS 的匹配原理 浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。 例如： #divBox p span .red{color:red;} 浏览器的查找顺序如下： 先查找 html 中所有 class=’red’ 的 span 元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有 id 为 divBox 的 div 元素，如果都存在，则 CSS 匹配上 CSS选择器解析的顺序是从右至左，css源文件经过浏览器解析后会检索html树，如果从左往右匹配，当匹配失败时会
浏览器是怎么解析CSS选择器的？
YouYi__的博客
09-08 732
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进
CSS解析误解-选择器的从右向左解析
cychai的专栏
11-20 4269
对CSS解析的误解，选择器其实从右向左解析的。
浏览器解析css父子选择器的顺序从左向右
qq_39650209的博客
10-11 534
浏览器渲染过程解析——从URL到页面显示
王某某的博客
07-02 5706
写了一段时间的前端页面了，对于浏览器中页面的渲染流程和原理还有点一知半解，所以就花时间去学习了解了下浏览器的渲染原理，这边对自己的理解总结一下，如有错误请指正。 一、浏览器简介 浏览器是使用最广泛的软件之一，主要功能是向服务器发出请求，在浏览器窗口中展示用户需要的网络资源。资源的位置由用户的的URI（Uniform Resource Identifier统一资源标...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6425
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
【CSS】【面试题】牛客网CSS专项练习部分答案及解析（更新中...）
weixin_39006917的博客
03-01 6369
1.在W3C标准盒模型中，默认情况下块元素的总宽度为： content content+2*padding content+2*padding+2*border content+2*padding+2*border+2*margin 答案为：content 解析：CSS有两种盒子模型，分别为W3C盒子模型和IE盒子模型。区别在于，IE盒子模型的content部分，将border和padding包含进去了。width = border+padding+content。题干问的总宽度应该理解为width值为
为什么CSS选择器解析是从右往左匹配？
CSU_Zipple的博客
09-26 3456
在平时的开发过程中，我知道CSS选择器是从右往左匹配的，但是不知道为什么是从右往左而不是从左往右。这里记录一下分析心得。 我们知道dom树和css会合成为render树，这个操作实际上就是是需要将css附着到dom树上，因此需要根据选择器提供的信息对dom树进行遍历，才能将样式成功附着到对应的dom元素上。 假如我们有这样一颗dom树： .main / ...
为什么浏览器读取css规则的顺序是从右到左
weixin_30399821的博客
12-25 118
最近研究css性能优化，明白了浏览器读取css选择器的顺序是从右到左。但是为什么呢？这就涉及到了浏览器渲染页面的顺序，而关于浏览器的渲染，我们首页要了解浏览器的架构 浏览器构架图 如上图所示，浏览器主要由 用户界面（User Interface）, 浏览器引擎(Browser engine), 渲染引擎（Rendering engine), 网络模块(Networking)，js解析器(Ja...
为什么CSS选择器是从右往左解析
热门推荐
08-05 1万+
一、CSS选择器的解析顺序相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系，比如尽量不要写成：#div P.class { color: red; }而是写成：.class { color: red; }之所以需要这么写，给的解释是这样可以减少选择器匹配的次数（推荐一个CSS规范的网站）。初看觉得哦，有点道理啊，但是往细了再想想：如果我把层级定的足够的清晰分明
CSS选择器从右向左的匹配规则
十九万里的博客
05-31 581
下面这个栗子，CSS选择器它是如何工作的？ .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则，可能的理解是从左向右匹配:先找到.mod-nav，然后逐级匹配h3、span，在这个过程中如果遍历到叶子节点都没有匹配就需要回溯，继续寻找下一个分支。 但事实上，CSS选择器的读取顺序是从右向左。 还是上面的选择器，它的读取顺序变成：先找到所有的span，沿着span的父元素查找h3，中途找到了符合匹配规则的节点就加入结果集；如果直到根元素html都没有匹配，则不再遍.
css选择器解析：从右向左
Web_boom的博客
03-16 646
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
为什么CSS选择器是从右向左匹配的
最新发布
似水流年QC的博客
03-17 448
CSS规则下（比如.box span），会形成一条符合规则的索引树，树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。
css选择器选择顺序是从右往左的，为什么？
weixin_34194702的博客
09-07 484
 https://segmentfault.com/q/1010000000713509   为什么 CSS 选择器解析的时候是从右往左？ CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。 首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。 那为什...
css css选择器的解析是从右往左的
Novice-XiaoSong的博客
11-18 553
为什么从右往左的解析方法效率更高呢 如图： 假如 DOM 的结构如上图，匹配规则是 .mod-nav h3 span。 若从左向右的匹配，过程是：从 .mod-nav 开始，遍历子节点 header 和子节点 div，然后各自向子节点遍历。在右侧 div 的分支中，最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，假如有 1000 个 li，则这 1000 次的遍历与回溯会损失很多性能。 再看看从右至左的匹配：先找到所有的最右节点 span，对于每一个 spa
浏览器是怎样解析CSS选择器的？
sjinsa的博客
04-30 4809
按照从上到下，从右到左的顺序解析。.list a {color:blue;}先解析到 a 标签，并将页面上所有 a 标签的字体颜色都按照 color:red 进行渲染（蓝色），再解析到 .list ，将页面上所有 .list 类目下的 a 标签的字体渲染成蓝色。是的，你没有看错，浏览器解析CSS从来就是这么苦逼。 http://www.cnblogs.com/zhaodongyu/p/334108
浏览器解析css选择器的规则
_陌默
06-06 5123
浏览器解析css选择器的规则是从右向左的，这样会提高查找选择器所对应的元素的效率。 中国人有一个习惯，不论干什么，潜意识中的顺序都是从左到右，从上到下，从大到下，因此大多数人看到这个顺序都会感到很不适应，但大家要记得我们这是一个程序，而程序是用来干什么的？运行。因此它的第一要领是必须效率高，因此所谓的习惯我们就先抛到九霄云外去。 至于具体分析如下（个人理解）： 1.html片段如下
全面解析：CSS选择符用法与实例教程
“CSS选择符的用法和实例” 在Web开发中，CSS（层叠样式表）选择符是用于选取HTML或XML文档中元素的关键工具，它们决定了哪些元素会受到特定样式的控制。这篇内容主要关注CSS1和CSS2的选择符，虽然现代CSS已经发展...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值