深入學(xué)習(xí)CSS匹配原理
本文和大家重點(diǎn)討論一下CSS匹配原理的概念，瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找的，瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。
CSS匹配原理
用了這么多年的CSS，現(xiàn)在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看1個(gè)簡(jiǎn)單的CSS：
viewsourceprint?
- 1DIV#divBoxpspan.red{color:red;}
按習(xí)慣我們對(duì)這個(gè)CSS的理解是，瀏覽器先查找id為divBox的DIV元素，當(dāng)找到后，再找其下的所有p元素，然后再查找所有span元素，當(dāng)發(fā)現(xiàn)有span的class為red的時(shí)候，就應(yīng)用該style。多么簡(jiǎn)單易懂的原理，可是這個(gè)理解卻是完完全全相反、錯(cuò)誤的。
瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如之前說的DIV#divBoxpspan.red{color:red;}，瀏覽器的查找順序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。
瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。比如如下html和css：
viewsourceprint?
- 01<style>
- 02DIV#divBoxpspan.red{color:red;}
- 03<style>
- 04<body>
- 05<dividdivid="divBox">
- 06<p><span>s1span>p>
- 07<p><span>s2span>p>
- 08<p><span>s3span>p>
- 09<p><spanclassspanclass='red'>s4span>p>
- 10div>
- 11body>
如果按從左到右查找，哪會(huì)先查找到很多不相關(guān)的p和span元素。而如果按從左到右的方式進(jìn)行查找，則首先就查找到
簡(jiǎn)潔、高效的CSS寫法
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時(shí)候盡量進(jìn)行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯(cuò)誤（也是我以前常常犯的錯(cuò)誤，還老以為這樣寫才是高效的）：
◆不要在ID選擇器前使用標(biāo)簽名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋：因?yàn)镮D選擇器是唯一的，加上div反而增加不必要的匹配。
◆不要再class選擇器前使用標(biāo)簽名
一般寫法：span.red
更好寫法：.red
解釋：同***條，但如果你定義了多個(gè).red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：
viewsourceprint?
- 1p.red{color:red;}
- 2span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉后就會(huì)混淆，不過建議***不要這樣寫。
◆盡量少使用層級(jí)關(guān)系
一般寫法：#divBoxp.red{color:red;}
更好寫法：.red{..}
◆使用class代替層級(jí)關(guān)系
一般寫法：#divBoxullia{display:block;}
更好寫法：.block{display:block;}
Firefox和google的2篇相關(guān)css解釋的文章，供大家參考：
googlepage-speed：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html
mozillaFirefox：https://developer.mozilla.org/en/Writing_Efficient_CSS
【編輯推薦】
- 解決CSS中float:right后右對(duì)齊換行問題
- CSS Sprites樣式生成工具用法詳解
- FireFox和IE中CSS兼容技巧匯總
- CSS代碼整理及優(yōu)化七大原則
- 深入剖析Firefox下 margin-top失效原因與解決方案
