掌握CSS匹配原理，編寫完美CSS代碼
本節(jié)和大家重點討論一下CSS查找匹配原理和簡潔高效的CSS代碼的編寫，所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進(jìn)行少的查找，相信本文介紹一定會讓你有所收獲的。
了解CSS的查找匹配原理，寫更簡潔高效的CSS代碼
使用了這么多年的CSS，現(xiàn)在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看1個簡單的CSS：
- DIV#divBoxpspan.red{color:red;}
按習(xí)慣我們對這個CSS的理解是，瀏覽器先查找id為divBox的DIV元素，當(dāng)找到后，再找其下的所有p元素，然后再查找所有span元素，當(dāng)發(fā)現(xiàn)有span的class為red的時候，就應(yīng)用該style。多么簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。
CSS匹配原理：
瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如之前說的DIV#divBoxpspan.red{color:red;}，瀏覽器的查找順序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則CSS匹配上。
瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。比如如下html和css:
- <style>
- DIV#divBoxpspan.red{
- color:red;
- }
- <style>
- <body>
- <dividdivid="divBox">
- <p><span>s1</span></p>
- <p><span>s2</span></p>
- <p><span>s3</span></p>
- <p><spanclassspanclass='red'>s4</span></p>
- </div>
- </body>
如果按從左到右查找，哪會先查找到很多不相關(guān)的p和span元素。而如果按從左到右的方式進(jìn)行查找，則首先就查找到<spanclass='red'>的元素。firefox稱這種查找方式為keyselector(關(guān)鍵字查詢)，所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則，上面的key就是span.red。
簡潔、高效的CSS:
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進(jìn)行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯誤：
1.不要在ID選擇器前使用標(biāo)簽名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋：因為ID選擇器是唯一的，加上div反而增加不必要的CSS匹配。
2.不要再class選擇器前使用標(biāo)簽名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：
- p.red{color:red;}
- span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉后就會混淆，不過建議最好不要這樣寫
3.盡量少使用層級關(guān)系
一般寫法：#divBoxp.red{color:red;}
更好寫法：.red{..}
4.使用class代替層級關(guān)系
一般寫法：#divBoxullia{display:block;}
更好寫法：.block{display:block;}
【編輯推薦】
- CSS中display屬性的妙用
- 常用CSS+DIV排版技術(shù)用法剖析
- CSS中border和clear兩大屬性用法揭秘
- 實例解析CSS DIV絕對定位與固定定位用法
- 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因
