瞭解CSS的尋找匹配原理，讓CSS更簡潔、高效
用了這麼多年的CSS，現在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看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:
| 以下為引用的內容： <style>DIV#divBox p span.red{color:red;} <style> <body> <div id="divBox"> <p><span>s1</span></p> <p><span>s2</span></p> <p><span>s3</span></p> <p><span class='red'>s4</span></p> </div> </body> |
如果按從左至右尋找，哪會先尋找到很多不相關的p和span元素。而如果按從左至右的方式進行尋找，則首先就尋找到<span class='red'>的元素。firefox稱這種尋找方式為key selector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。
簡潔、高效的CSS:
所謂高效的CSS就是讓瀏覽器在尋找style匹配的元素的時候盡量進行少的尋找，下面列出一些我們常見的寫CSS犯一些低效錯誤(也是我以前常常犯的錯誤，還老以為這樣寫才是高效的)：
1、不要在ID選取器前使用標籤名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋： 因為ID選取器是唯一的，加上div反而增加不必要的匹配。
2、不要再class選取器前使用標籤名
一般寫法：span.red
更好寫法：.red
解釋： 同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫
3、盡量少使用層級關係
一般寫法：#divBox p .red{color:red;}
更好寫法：.red{..}
4、使用class代替層級關係
一般寫法：#divBox ul li a{display:block;}
更好寫法：.block{display:block;}
PS：看有些同學對從右至左的理論保持懷疑，下面貼出firefox和google的2篇相關css解釋的文章，供大家參考
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
