建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
掌握CSS匹配原理，編寫完美CSS代碼
本節(jié)和大家重點討論一下CSS查找匹配原理和簡潔高效的CSS代碼的編寫，所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找，相信本文介紹一定會讓你有所收獲的。
成都創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比翔安網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式翔安網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋翔安地區(qū)。費用合理售后完善，10年實體公司更值得信賴。
了解CSS的查找匹配原理，寫更簡潔高效的CSS代碼
使用了這么多年的CSS，現(xiàn)在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看1個簡單的CSS：
- DIV#divBoxpspan.red{color:red;}
按習慣我們對這個CSS的理解是，瀏覽器先查找id為divBox的DIV元素，當找到后，再找其下的所有p元素，然后再查找所有span元素，當發(fā)現(xiàn)有span的class為red的時候，就應用該style。多么簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。
CSS匹配原理：
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如之前說的DIV#divBoxpspan.red{color:red;}，瀏覽器的查找順序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則CSS匹配上。
瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規(guī)則和元素。比如如下html和css: