关于css解析器
HTML 经过解析生成 DOM Tree（这个咱们比较熟悉）；而在 CSS 解析完毕后，必须将解析的结果与 DOM Tree 的内容一块进行分析创立一棵 Render Tree，最后用来进行绘图。
Render Tree 中的元素（WebKit 中叫作为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，区别的「行」会作为 render tree 种区别的 renderer。亦有的 DOM 元素被 Render Tree 完全没视，例如 display:none 的元素。
在创立 Render Tree 时（WebKit 中的「Attachment」过程）， 浏览器就要为每一个 DOM Tree 中的元素按照 CSS 的解析结果（Style Rules）来确定生成怎么样的 renderer。针对每一个 DOM 元素，必要在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选取器的「解析」实质是在这儿执行的 ，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。
解析次序
CSS匹配不是从左到右进行查询，而是 从右到左进行查询 。倘若从左到右的次序，那样每条选取器都必须遍历全部DOM树，性能很受影响。所说有效的CSS便是让浏览器在查询style匹配的元素的时候尽可能进行少的查询, 因此选取器最好写的简洁一点。
选取器权重
权重，亦便是 选取器的优先级 ，每条选取器的规则都有其权重，权重大的会覆盖掉权重小的，非常多CSS显现问题的场景，都是某处定义了一个更高权重的规则，引起此处规则不生效。
按照样式所在位置，对元素的影响亦相关系：内联样式（标签内style形式） > style标签 > link标签。
另一一点必须重视的是 !improtant ,凡是属性值后加上了 !important ，那样它的值不会被其他值替换。
权重等级
每一个选取器在权重级别中都有自己泾渭分明的位置。按照选取器种类的区别能够分为四类，亦决定了四种区别等级的权重值。
行内样式，指的是html文档中定义的style
行内样式包括在你的html中 对你的元素产生直接功效，例如:
<h1 style="color: #fff;">header</h1>
ID选取器
Id亦是元素的一种标识，例如#div
类，属性选取器和伪类选取器
这一类包含各样class，属性选取器，伪类选取器例如 :hover,:focus等等。
元素和伪元素
元素跟伪元素选取器，例如:before 与 :after.
伪元素选取器只包括以下几种:
::after::before::first-letter::first-line::selecton权重记忆口诀
从0起始，一个 行内样式+1000 ，一个 id+100 ，一个 属性选取器/class或伪类+10 ，一个元素名，或伪元素+1
body #content .data img:hover
最后的权重值是0122；#content是一个id选取器加了100，.data是一个class类选取器加了10，：hover伪类选取器加了10， body和img是元素加了1 。仔细参阅【CSS Specificity 】
css权重规则
1、基本规则
相同的权重：以后面显现的选取器为最后规则
区别的权重：权重值高则生效
<section class="weight">
<style>
.weight #weightP {
color: red; // 0110
}
.weight p#weightP {
color: gray; // 0111 生效
}
#weightP {
color
| 
发表于 2024-6-30 06:46:06
