看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: