前端 - 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引擎