ps： 不好意思，講ps寫在前面，這裡我下次看到，記憶應該會更深刻。
這樣終於理解了為什麼google pagespeed 中提醒 少用層級css，以及為什麼應該幾乎給每個有樣式的設定乙個class的原因了（這個感覺還有待商榷，是個提高瀏覽器效率還是提高css書寫效率的博弈）。
另外，ie還有待證明。
用了這麼多年的css，現在才明白css的真正匹配原理，不知道你是否也跟我一樣？看1個簡單的css：
div#divbox p span.red，按習慣我們對這個css 的理解是，瀏覽器先查詢id為divbox的div元素，當找到後，再找其下的所有p元素，然後再查詢所有span元素，當發現有span的class為red的時候，就應用該style。多麼簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。
匹配原理：
瀏覽器css匹配不是從左到右進行查詢，而是從右到左進行查詢。比如之前說的 div#divbox p span.red，瀏覽器的查詢順序如下：
先查詢html中所有class='red'的span元素，找到後，再查詢其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divbox的div元素，如果都存在則匹配上。
瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。比如如下html和css:
div#divbox p span.red
s1s2
s3s4
如果按從左到右查詢，哪會先查找到很多不相關的p和span元素。而如果按從左到右的方式進行查詢，則首先就查詢到的元素。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
span.red
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫
3.盡量少使用層級關係
一般寫法：#divbox p .red
更好寫法：.red
4.使用class代替層級關係
一般寫法：#divbox ul li a
更好寫法：.block
瀏覽器相容的css寫法
1.ie6 ie7 ie8相容寫法 color ccc 只ie6支援 color ccc ie6 7支援 color ccc ie7支援 color ccc 0 0 ie8支援 color ccc 9 9 ie6 7 8支援 2.瀏覽器核心代表 ms transform rotate 7deg ms...
CSS瀏覽器字首相容寫法
vendor prefix 瀏覽器引擎字首，是一些放在css屬性前的小字串，用來確保這種屬性只在特定的瀏覽器渲染引擎下才能識別和生效。谷歌瀏覽器和safari瀏覽器使用的是 webkit 渲染引擎，火狐瀏覽器使用的是 gecko 引擎，internet explorer 使用的是 trident 引...
CSS瀏覽器字首相容寫法
css瀏覽器字首相容寫法 vendor prefix 瀏覽器引擎字首，是一些放在css屬性前的小字串，用來確保這種屬性只在特定的瀏覽器渲染引擎下才能識別和生效。瀏覽器引擎字首 vendor prefix 有哪些？moz 火狐等使用mozilla瀏覽器引擎的瀏覽器 webkit safari,谷歌瀏覽...