對於下面兩種css寫法，相信很多人和我想的一樣
ul.new-ul比
.new-ul更高效。
其實我們的理解貌似沒有錯。如果在類名前面加上標籤的話，這樣瀏覽器就可以先找到所有對應的標籤，然後匹配類名，這樣就不用全域性匹配了，查詢速度自然會快很多。
我們這樣的理解，意味著選擇器解析是從左往右的，就像jquery的選擇器一樣。
但是，實際上，css選擇器的解析是從右往左的。
也就是說.classname就會直接一步找到classname，如果在前面放了乙個標籤，就像tag.classname，就會再次匹配前面的標籤名tag，層級的匹配也是類似的。那麼，很明顯，匹配的次數更多了。
瀏覽器css匹配不是從左到右進行查詢，而是從右到左進行查詢。比如div#divbox p span.red，瀏覽器的查詢順序如下：先查詢html中所有class='red'的span元素，找到後，再查詢其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divbox的div元素，如果都存在則匹配上。
瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。
那麼，我們們就可以明確，紅色高亮部分的選擇器查詢要比黑色部分要快
.new-ul /*快*/那麼，對於層級選擇器也是一樣 那麼針對上面的css結構，我們推薦使用.new-ul-li-a來選擇到a，而不是.new-ul li a這樣的層級選擇。ul.new-ul
#new-ul /*快*/
ul#new-ul
writing efficient css for use in the mozilla ui
理解後，我們就可以寫出更簡潔、高效的css：
所謂高效的css就是讓瀏覽器在查詢style匹配的元素的時候盡量進行少的查詢，下面列出一些我們常見的寫css犯一些低效錯誤：
◆不要在id選擇器前使用標籤名
一般寫法：div#divbox
更好寫法：#divbox
解釋： 因為id選擇器是唯一的，加上div反而增加不必要的匹配。
◆不要再class選擇器前使用標籤名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：
p.red如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫span.red
◆盡量少使用層級關係
一般寫法：#divbox p .red
更好寫法：.red
◆使用class代替層級關係
一般寫法：#divbox ul li a
更好寫法：.block
參考：http://www.maisui99.com/css-selector-right-to-left/
為什麼CSS選擇器是從右往左解析
一 css選擇器的解析順序 相信很多人在一開始接觸css的時候都會看到一條規則就是盡量少使用層級關係，比如盡量不要寫成 div p.class 而是寫成 class 之所以需要這麼寫，給的解釋是這樣可以減少選擇器匹配的次數 推薦乙個css規範的 初看覺得哦，有點道理啊，但是往細了再想想 如果我把層級...
為什麼CSS選擇器解析是從右往左匹配？
在平時的開發過程中，我知道css選擇器是從右往左匹配的，但是不知道為什麼是從右往左而不是從左往右。這裡記錄一下分析心得。我們知道dom樹和css會合成為render樹，這個操作實際上就是是需要將css附著到dom樹上，因此需要根據選擇器提供的資訊對dom樹進行遍歷，才能將樣式成功附著到對應的dom元...
css的選擇器
每一條css樣式宣告 定義 由兩部分組成，形式如下 選擇器在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件，也就是 樣式 作用於網頁中的哪些元素。標籤選擇器其實就是html 中的標籤。如右側 編輯器中的 p上面的css樣式 的作用 為p標籤設定12px字型大小，行間距設定1.6em...