css规则树

前面已经介绍过了，dom树和css树合并之后，形成一棵最终的RenderTree，最后这颗RenderTree才会被渲染到页面。

比如下面的css会转成下面的树

body { font-size: 16px }

p { font-weight: bold }

span { color: red }

p span { display: none }

img { float: right }

灰色的是继承过来的属性。

首先几个大标签，比如htlm肯定是最外面的，body，head，这几个并排在html下面。

只是说上面这个例子只有body，然后其他标签自然就是他的子标签啦。

最后的cssom树如上面所示.

就是根据了css来搞的。

 

css匹配原则

 

查找样式表是按照从右到左的顺序去匹配的。拿上面这个css图来说吧：

例如： body p span{font-size: 16px}，先遍历整颗树的span标签，找到两个，分别是body-span标签和body-p-span，然后查找span的父类，淘汰掉body-span，找到body-p-span，再向上，就找到body，ok匹配结束，设想，如果span非常之多，然后有很多类似的后缀，比如body-b-div-span和html-b-div-span，我们要匹配的是body-b-div-span，这样子，html-b-div-span就完完全全多匹配了3次了（多匹配了b、div、span），这样子性能肯定是非常糟糕的。

所以，我们平时写CSS时，尽量用id和class，千万不要过渡层叠。因为用id或者class，可以迅速再cssom树上找到对应的class和id对应的css样式。