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