css权重优先级

关于css权重优先级

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

浏览器渲染过程

在说到css解析器之前，我们需要先熟悉下浏览器的渲染过程

1.html通过HTML Parser转化成DOM Tree
2.css通过CSS Parser转化成CSSOM Tree
3.整合css和html两个tree为render Tree
4.根据Layout(重排)计算出DOM节点在网页中的位置和宽高排布
5.浏览器根据render Tree和Layout利用GUI线程进行渲染展示（重绘）

与css解析器相关，我们先重点看第3步：整合css和html两个tree为render Tree。这个整合过程，实际上是在每个DOM节点上遍历CSS样式，最终生成每个节点的样式规则。

css解析选择器的方向：从右到左

为什么要从右到左 ?

为了解释这个问题，我们先来看一段代码和对应的css选择器

<div class="col"><div class="a"><div class="b"><div class="c"></div></div><div class="b"><ul class="d"><li>1</li><li class="c">2</li><li>3</li><li>4</li></ul></div>
</div>

.col .a .b { color: #f00; }
.col .b .c { color: #0f0; }
.b .c { color: #00f; }

如果从左到右，遍历方式如下：

某个DOM节点的选择器以.col .a .b为例，

先遍历所有CSSOM节点，找到所有col
再遍历col所有后代节点，找到所有的a
再遍历所有a的后代节点，找到所有的b

如果从右到左，遍历方式如下：

节点对比从左到右减少了，是因为有公共节点，从右到左，只要有公共，就能共用，这样公共样式就很容易集合到同一分支上

某个DOM节点的选择器以.col .a .b为例，

先遍历所有CSSOM节点，找到所有的b
以b为基准，找上层的a
以a为基准，找上层的col

这种遍历方式，只用遍历一次，然后判断上层节点是否匹配即可。

从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是DOM元素的父节点，而从左往右进行匹配的时候时候，匹配的全部是DOM元素的子节点，这样就避免了HTML与CSS没有下载完需要进行等待的情形。

由此也可以等到一个优化重绘的结论：避免不必要的复杂的 CSS 选择器，尤其是后代选择器，因为为了匹配选择器将耗费更多的 CPU。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

css选择器解析：从右向左相关推荐

30个最常用css选择器解析
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
css实现文字从右向左排列
在css样式中加入:direction: rtl ,即可让文字从右向左排列,但此时符号的排列位置不正确,会显示在文本的最左边. 如:hello,world! 会变成:!hello,world 解决方 ...
CSS选择器优先级总结
本文转载自https://www.cnblogs.com/zxjwlh/p/6213239.html CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别 ...
如何提升 CSS 选择器的性能？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: # ...
浏览器是怎样解析 CSS 选择器的？
一.css选择器解析原理 1.样式系统从关键选择器开始匹配,然后左移查找规则选择器的祖先元素.只要选择器的子树一直在工作,样式系统就会持续左移,知道和规则匹配,或者是因为不匹配而放弃该规则.2.如 ...
常用 CSS 选择器
// css 读取顺序从右到左,符合要求的都会匹配 // 通配符选择器 -- 选择所有元素 * // 通配符选择器 -- 选择某个元素下的所有元素 .demo * // 元素选择器 html,body ...
第三章 CSS 选择器的命名
CSS 选择器是否区分大小写 CSS 选择器有那些区分大小写那些不区分大小写还有那些可以设置为不区分: 要搞清楚这个问题, 还要从 HTML 说起: 在HTML 中: 标签和 ...
[css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
谈一谈浏览器解析CSS选择器的过程【前端每日一题-6】
谈一谈浏览器解析CSS选择器的过程? 这是一道发散题,可以根据自己的理解自行解答. 在开始前,我们必须了解一个真相:为什么排版引擎解析 CSS 选择器时一定要从右往左解析? 简单的来说:浏览器从右到左 ...

css选择器解析：从右向左