国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

前端 - dom是如何與css規則匹配的?

瀏覽:68日期:2023-08-07 09:38:55

問題描述

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

標簽: CSS
相關文章:
主站蜘蛛池模板: 日韩精品观看 | 久久91精品国产91久久 | 久久久久久久综合 | 欧美精品在线视频观看 | 国产毛片一级国语版 | 精品高清国产a毛片 | 国产在线步兵一区二区三区 | 亚洲精品久 | 风流慈禧一级毛片在线播放 | 欧美色88| 高级毛片 | 日韩美女视频一区 | 成人福利网站在线看视频 | 欧美大片欧美毛片大片 | 欧美一级毛片免费观看 | 日本伊人精品一区二区三区 | 在线观看 一区 | 国产一区二区三区免费播放 | 成年人性网站 | 欧美三级日韩 | 可以看毛片的网址 | 国产97视频在线 | 一级毛毛片毛片毛片毛片在线看 | 日韩在线视屏 | 香蕉香蕉国产片一级一级毛片 | 毛片免费网址 | 成人男女啪啪免费观看网站 | 国产精品成人一区二区三区 | a一级毛片录像带 录像片 | 国产成人a视频在线观看 | 特级片视频 | 亚洲欧洲日产国码二区首页 | 欧美精品免费看 | 黄在线观看在线播放720p | 天堂8资源在线官网资源 | 日日碰碰 | a级精品九九九大片免费看 a级毛片免费观看网站 | 欧美三级一级 | 波多野结衣在线播放视频 | 亚洲天堂网在线视频 | 亚洲成人视 |