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

查看完整描述

2 回答

嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

反對(duì) 回復(fù) 2019-04-13

繁星coding

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊

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