了解CSS的查找匹配原理，讓CSS更簡潔、有效率_經驗交流
- WBOY原創
- 2016-05-16 12:04:081139瀏覽
看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:
複製程式碼 程式碼如下:
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：ie6 註釋引起的問題_經驗交流下一篇：ie6 註釋引起的問題_經驗交流