前端 - dom是如何与css规则匹配的？

问题描述

比如我有如下CSS代码：

.red { background-color: red;}table { background-color: yellow;}

<table> <tr> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td class='red'>123</td> </tr></table>

解析CSS的时候先找到class='red'，把那个td设置成红色，然后找到table，把table设置成黄色，同时他又能分辨出class='red'那个td，并且不会覆盖它，这是怎么做到的？是不是每个规则都会去看之前解析的规则是否匹配了。比如有n个dom，m个规则，每个dom都要去从这m个规则中找是否匹配，这个匹配的算法是什么样的呢？会把所有的css规则生成一棵树然后每个dom在树上查找，还是会用其他查找算法呢？这篇文章讲了一些，求高人解惑：http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

问题解答

回答1：

其实，没你说的那么复杂，这里就是一个优先级和继承的问题

继承：如果父元素上设置了能用于继承的样式，而子元素上又没定义相同的样式，那么就会直接父元素的，比如像 font-size、background等；有些样式是不能继承的，比如border、padding等；

优先级：如果针对同一个元素在样式表中设置了多个选择器操作它时，那么在优先级相同的情况下，最后设置的会覆盖掉前面所有的设置，而且元素本身设置的样式优先级也会高于继承的样式；

说一下优先级的规则：

id选择的优先级为 0 1 0 0class选择的优先级为 0 0 1 0ele 选择的优先级为 0 0 0 1继承的样式是没有优先级的

这里我只是说了三个常见的优先级，更多优先级规则LZ可以去看看css权威指南(第二版)；

再回到你的问题当中table设置了背景色，那子元素td会直接继承过来，但是，又针对某一个td设置了一个class='red'，跟据上面的优先级规则，其他td是没有优先级的，只是单纯的继承了table的样式，而class='red的这个td的优先级为 0010，固优先级最高，所以应用之；

最后补充一句：优先级相加即使大于10也不会向前进一如：0 0 1 0 大于 0 0 0 15

回答2：

最简单的方法就是找个开源的代码看一下，比如 webkit。

1、HTML浏览器探究——webkit部分——解析(1)HTML起源浏览器探究——webkit部分——解析HTML（2）解码和HTMLTokenizer的处理浏览器探究——webkit部分——解析HTML（3）HTMLToken的处理2、CSSWebkit内核探究【2】——Webkit CSS实现

我上面推荐的博客，都是系列。感兴趣的话，可以顺带着看看其它的文章。

希望对你有帮助。

回答3：

w3c标准只会告诉要做成这样，用什么算法实现交给了浏览器，比如v8引擎