寫了幾篇關於js的部落格，也是關於效能的，現在，我覺得有必要那css來認真分析一下了。之前只是看別人這麼寫就跟著寫，但是沒有去研究這樣寫或者是不是正確的寫法，價效比怎麼樣，渲染的效率好麼！這些都沒有考慮。
那麼，現在，我提出css的一些選擇器的效能分析。
0;……}
* ……
這樣寫完了以後，渲染的效果至少呈現出來了，可是，要想到css選擇器從右向左的匹配規則
此時，我就想研究一下瀏覽器在將dom tree 變成 render tree 的時候css規則是如何匹配的？於是，就在網上找了一些資料：
看了這麼多我的理解是從右往左匹配會首先過濾掉一大批不符合規則的樣式，從而使得效率更高。舉個例子
並引入關鍵選擇器的概念(選擇器最後的那部分)
關鍵選擇器為a
*/0;……} /*
關鍵選擇器為.name
*/根據關鍵選擇器屬於哪類再在這一類中查詢，從而達到更快匹配的目的。那麼問題來了，怎樣寫才能達到高效呢？
css選擇器效率從高到低的排序如下：
id選擇器 比如#header
類選擇器 比如.promo
元素選擇器 比如 div
兄弟選擇器 比如 h2 + p
子選擇器 比如 li > ul
後代選擇器 比如 ul a 7. 通用選擇器 比如 *
屬性選擇器 比如 type = 「text」
偽類/偽元素選擇器 比如 a:hover
以上引用自steve souders的even faster**
在實際使用中我們盡量選擇高效一點的選擇器，但是有一點很難避免那就是組合選擇器的使用，一般都會用到。在使用組合選擇器時我們需要注意一下幾點：
不要用標籤名限定 class 規則，這會有損靈活性
避免使用過度限制選擇器(最好不要超過3層)
好 .content .list{}
避免後代選擇器,後代選擇器是 css 中效能耗用最大的選擇器。
依賴繼承
這篇文章中介紹了20中不同的選擇器的執行效率問題。
結合自己的實踐經歷，在編寫css規則時需注意以下幾點：
巢狀層級最好不要超過3層
避免使用標籤選擇器，盡可能使用具體的類名
不要給關鍵選擇器新增多餘的規則
css選擇器在效能提公升上儘管相對於js等提公升空間不大，但在大型專案中高效率的css選擇器的效能優勢就能得到展現
css選擇器效能情況
選擇器效率從高到低的排序列表 id選擇器 id 類選擇器 classname 標籤選擇器 div,h1,p 相鄰選擇器 h1 p 子選擇器 ul li 後代選擇器 li a 萬用字元選擇器 屬性選擇器 a rel external 偽類選擇器 a hover,li nth child 決定選擇器效能...
CSS 選擇器效能提公升
css 選擇器效能損耗來自?css選擇器對效能的影響源於瀏覽器匹配選擇器和文件元素時所消耗的時間，所以優化選擇器的原則是應盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解css選擇器匹配的機制，如子選擇器規則 header a 我們中的大多數人都是從左到右的閱讀習慣，會習慣性的設定瀏覽器...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...