首頁猿問 dom是如何與css規(guī)則匹配的？

dom是如何與css規(guī)則匹配的？

JavaScript

幕布斯6054654 2019-04-13 08:45:33

比如我有如下CSS代碼：.red{background-color:red;}table{background-color:yellow;}123123123123解析CSS的時候先找到class="red"，把那個td設置成紅色，然后找到table，把table設置成黃色，同時他又能分辨出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/

查看完整描述

2 回答

嚕嚕噠

TA貢獻1784條經(jīng)驗獲得超7個贊

其實，沒你說的那么復雜，這里就是一個優(yōu)先級和繼承的問題繼承：如果父元素上設置了能用于繼承的樣式，而子元素上又沒定義相同的樣式，那么就會直接父元素的，比如像font-size、background等；有些樣式是不能繼承的，比如border、padding等；優(yōu)先級：如果針對同一個元素在樣式表中設置了多個選擇器操作它時，那么在優(yōu)先級相同的情況下，最后設置的會覆蓋掉前面所有的設置，而且元素本身設置的樣式優(yōu)先級也會高于繼承的樣式；說一下優(yōu)先級的規(guī)則：id選擇的優(yōu)先級為0100class選擇的優(yōu)先級為0010ele選擇的優(yōu)先級為0001繼承的樣式是沒有優(yōu)先級的這里我只是說了三個常見的優(yōu)先級，更多優(yōu)先級規(guī)則LZ可以去看看css權(quán)威指南(第二版)；再回到你的問題當中table設置了背景色，那子元素td會直接繼承過來，但是，又針對某一個td設置了一個class="red"，跟據(jù)上面的優(yōu)先級規(guī)則，其他td是沒有優(yōu)先級的，只是單純的繼承了table的樣式，而class="red的這個td的優(yōu)先級為0010，固優(yōu)先級最高，所以應用之；最后補充一句：優(yōu)先級相加即使大于10也不會向前進一如：0010大于00015

反對回復 2019-04-13

繁星coding

TA貢獻1797條經(jīng)驗獲得超4個贊

最簡單的方法就是找個開源的代碼看一下，比如webkit。1、HTML瀏覽器探究——webkit部分——解析(1)HTML起源瀏覽器探究——webkit部分——解析HTML（2）解碼和HTMLTokenizer的處理瀏覽器探究——webkit部分——解析HTML（3）HTMLToken的處理2、CSSWebkit內(nèi)核探究【2】——WebkitCSS實現(xiàn)我上面推薦的博客，都是系列。感興趣的話，可以順帶著看看其它的文章。希望對你有幫助。