問題描述

比如我有如下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設(shè)置成紅色，然后找到table，把table設(shè)置成黃色，同時他又能分辨出class='red'那個td，并且不會覆蓋它，這是怎么做到的？是不是每個規(guī)則都會去看之前解析的規(guī)則是否匹配了。比如有n個dom，m個規(guī)則，每個dom都要去從這m個規(guī)則中找是否匹配，這個匹配的算法是什么樣的呢？會把所有的css規(guī)則生成一棵樹然后每個dom在樹上查找，還是會用其他查找算法呢？這篇文章講了一些，求高人解惑：http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

問題解答

回答1：

其實，沒你說的那么復(fù)雜，這里就是一個優(yōu)先級和繼承的問題

繼承：如果父元素上設(shè)置了能用于繼承的樣式，而子元素上又沒定義相同的樣式，那么就會直接父元素的，比如像 font-size、background等；有些樣式是不能繼承的，比如border、padding等；

優(yōu)先級：如果針對同一個元素在樣式表中設(shè)置了多個選擇器操作它時，那么在優(yōu)先級相同的情況下，最后設(shè)置的會覆蓋掉前面所有的設(shè)置，而且元素本身設(shè)置的樣式優(yōu)先級也會高于繼承的樣式；

說一下優(yōu)先級的規(guī)則：

id選擇的優(yōu)先級為 0 1 0 0class選擇的優(yōu)先級為 0 0 1 0ele 選擇的優(yōu)先級為 0 0 0 1繼承的樣式是沒有優(yōu)先級的

這里我只是說了三個常見的優(yōu)先級，更多優(yōu)先級規(guī)則LZ可以去看看css權(quán)威指南(第二版)；

再回到你的問題當(dāng)中table設(shè)置了背景色，那子元素td會直接繼承過來，但是，又針對某一個td設(shè)置了一個class='red'，跟據(jù)上面的優(yōu)先級規(guī)則，其他td是沒有優(yōu)先級的，只是單純的繼承了table的樣式，而class='red的這個td的優(yōu)先級為 0010，固優(yōu)先級最高，所以應(yīng)用之；

最后補(bǔ)充一句：優(yōu)先級相加即使大于10也不會向前進(jìn)一如：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內(nèi)核探究【2】——Webkit CSS實現(xiàn)

我上面推薦的博客，都是系列。感興趣的話，可以順帶著看看其它的文章。

希望對你有幫助。

回答3：

w3c標(biāo)準(zhǔn)只會告訴要做成這樣，用什么算法實現(xiàn)交給了瀏覽器，比如v8引擎