前面已经介绍过了，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样式。