[css] 瀏覽器是怎樣判斷元素是否和某個CSS選擇器匹配？

有選擇器： div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出來組成一個集合，然后上一層，對每一個集合中的元素，如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。 再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 為 div 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。 至此這個選擇器匹配結束，所有還在集合中的元素滿足。大體就是這樣，不過瀏覽器還會有一些奇怪的優化。 如圖： 11558321348_ pic 注意：1、為什么從后往前匹配因為效率和文檔流的解析方向。效率不必說，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。關于文檔流的解析方向，是因為現在的 CSS，一個元素只要確定了這個元素在文檔流之前出現過的所有元素，就能確定他的匹配情況；應用在即使 html 沒有載入完成，瀏覽器也能根據已經載入的這一部分信息完全確定出現過的元素的屬性。2、為什么是用集合主要也還是效率?；?CSS Rule 數量遠遠小于元素數量的假設和索引的運用，遍歷每一條 CSS Rule 通過集合篩選，比遍歷每一個元素再遍歷每一條 Rule 匹配要快得多。

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。