了解CSS的查找匹配原理，讓CSS更簡潔、高效_經驗交流

來源：懂視網責編：小采時間：2020-11-27 18:55:41

了解CSS的查找匹配原理，讓CSS更簡潔、高效_經驗交流

了解CSS的查找匹配原理，讓CSS更簡潔、高效_經驗交流:看1個簡單的CSS： DIV#divBox p span.red{color:red;}，按習慣我們對這個CSS 的理解是，瀏覽器先查找id為divBox的DIV元素，當找到后，再找其下的所有p元素，然后再查找所有span元素，當發現有span的class為red的時候，就應用該style。多么簡單

推薦度：

點擊下載本文 文檔為doc格式

導讀了解CSS的查找匹配原理，讓CSS更簡潔、高效_經驗交流:看1個簡單的CSS： DIV#divBox p span.red{color:red;}，按習慣我們對這個CSS 的理解是，瀏覽器先查找id為divBox的DIV元素，當找到后，再找其下的所有p元素，然后再查找所有span元素，當發現有span的class為red的時候，就應用該style。多么簡單

看1個簡單的CSS：

DIV#divBox p span.red{color:red;}，按習慣我們對這個CSS 的理解是，瀏覽器先查找id為divBox的DIV元素，當找到后，再找其下的所有p元素，然后再查找所有span元素，當發現有span的class為red的時候，就應用該style。多么簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。

匹配原理：

瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如之前說的 DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：

　　先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。

瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。比如如下html和css:

代碼如下: