css 選擇器效能的取捨。和大量標籤帶有都是class

轉載自：https://segmentfault.com/q/1010000003749652

近期剛好在整理選擇器效能相關的知識點，內容如下：

選擇器效率從高到低的排序列表:

id選擇器（#id）

類選擇器（.className）

標籤選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul > li）

後代選擇器（li a）

萬用字元選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover,li:nth-child）

決定選擇器效能的幾個點：

首先選擇器對效能的影響源於瀏覽器匹配選擇器和文件元素時所消耗的時間，所以優化選擇器的原則是應儘量避免使用消耗更多匹配時間的選擇器。

但是想用更快的選擇器之前，還要了解選擇器的匹配機制，事實上，瀏覽器讀取選擇器時，不是按照我們的閱讀習慣從左到右，而是遵循的從選擇器的右邊到左邊進行讀取的。

那麼最右側的選擇器對於效能就起著關鍵性的作用，它是最先開始查詢的，如果最右側是#id選擇器那麼效能就很高，如果是標籤選擇器那麼效能就會大打折扣。

最後回答你的問題：

1、class和id選擇器效能最好，其他選擇器我看網上說建議不要用

雖然id選擇器的效能最好，但是因為一個頁面內不能出現相同的ID，所以也不可常用。那麼最常用的應該就是class類選擇器，但是遇到li、td、dd等經常大量連續出現的元素，應該採用class類選擇器結合後代選擇器進行選擇，如.nav > li，而不是在每一個元素上引用class類。

2、那麼這樣的話html文件就會有大量的帶有class標籤了

頁面中出現大量的class類是最麻煩的，不僅難以維護，而且複用性是最差的，最頭疼的還時常因為選擇器優先順序問題導致定義的屬性值失效，所以這種做法沒有任何意義，既沒有提高效能，也會造成很多麻煩。

3、對於大量的帶有class標籤 和 選擇器效能比起來。怎麼取捨呢?大量class標籤會也會影響效能嗎？

不要太在乎選擇器效能，請根據上述的選擇器效能優化的方向，大膽靈活運用所有的選擇器，多瞭解CSS的特性，慢慢你的CSS程式碼就不會被這些問題所困擾了。