在平時的開發過程中,我知道css選擇器是從右往左匹配的,但是不知道為什麼是從右往左而不是從左往右。這裡記錄一下分析心得。
我們知道dom樹和css會合成為render樹,這個操作實際上就是是需要將css附著到dom樹上,因此需要根據選擇器提供的資訊對dom樹進行遍歷,才能將樣式成功附著到對應的dom元素上。
假如我們有這樣一顆dom樹:
.main
/ \
section aside
/ \ / \
h1 .content .desc a
/ /
p p
我們定義這樣一段 css
.main .desc p
;
如果瀏覽器是從左到右解析:
如果從右到左解析:
當dom樹比較複雜的時候,可以發現從右到左解析能夠有效減少回溯次數提公升效能。
不過當從右往左解析時需要增加的效能消耗是如何在一棵樹中找出所有的』p』節點,不過這一步增加的效能遠小於回溯帶來的效能損耗。
為什麼CSS選擇器是從右往左解析
一 css選擇器的解析順序 相信很多人在一開始接觸css的時候都會看到一條規則就是盡量少使用層級關係,比如盡量不要寫成 div p.class 而是寫成 class 之所以需要這麼寫,給的解釋是這樣可以減少選擇器匹配的次數 推薦乙個css規範的 初看覺得哦,有點道理啊,但是往細了再想想 如果我把層級...
CSS解析誤解 選擇器的從右向左解析
對於下面兩種css寫法,相信很多人和我想的一樣 ul.new ul 比 new ul 更高效。其實我們的理解貌似沒有錯。如果在類名前面加上標籤的話,這樣瀏覽器就可以先找到所有對應的標籤,然後匹配類名,這樣就不用全域性匹配了,查詢速度自然會快很多。我們這樣的理解,意味著選擇器解析是從左往右的,就像jq...
CSS復合選擇器是什麼?復合選擇器是如何工作
選擇器 描述舉例 選擇器1 選擇器2 多元素選擇器。同時匹配選擇器1和選擇器2,多個選擇器之間用逗號隔開即可。h1,h2,h3 e f 後代元素選擇器,匹配所有屬於e元素後代的f元素,e和f之間用空格隔開即可。box h1 e f 子元素選擇器,匹配所有e元素的子元素為f div h1 e f相鄰元...