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

Question

比如我有如下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/

Answer 1

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

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

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

说一下优先级的规则：

• id选择的优先级为 0 1 0 0
• class选择的优先级为 0 0 1 0
• ele 选择的优先级为 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

Answer 2

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

1、HTML

• 浏览器探究——webkit部分——解析(1)HTML起源
• 浏览器探究——webkit部分——解析HTML（2）解码和HTMLTokenizer的处理
• 浏览器探究——webkit部分——解析HTML（3）HTMLToken的处理

2、CSS

• Webkit内核探究【2】——Webkit CSS实现

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

希望对你有帮助。

Answer 3

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