css選擇器知識匯總，看這一篇就夠了

css選擇器相信大家都不陌生，每一個前端小夥伴從一開始接觸前端就已經和它密不可分，今天我們就來整理一下css選擇器的知識：

嚴格來講，選擇器的種類可以分為三種：標籤名選擇器、類選擇器，ID選擇器。而所謂的後代選擇器和群組選擇器只不過是對前三種選擇器的擴展應用。

CSS選擇器效率從高到低的排序如下：

1.id選擇器（#myid）

2.類選擇器（.myclassname）

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

4.相鄰選擇器（h1+p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.通配符選擇器（*）

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

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

一般而言，選擇器越特殊，它的優先順序越高。也就是選擇器指向的越準確，它的優先順序就越高。

對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實能找到工作的朋友，我還是要推薦下我自己建的前端學習群：477149581，首先你要是前端黨，其次不管你是小白還是大牛，我都挺歡迎，小白嘛，主動點多問問題也就學好了，群里每天分享乾貨，包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料，送給大家，歡迎初學和進階中的小夥伴。

對於什麼情況下使用什麼選擇器，用不同選擇器的原則是：

1、準確的選到要控制的標籤；

2、使用最合理優先順序的選擇器；

3、HTML和CSS代碼盡量簡潔美觀。通常：

①最常用的選擇器是類選擇器。

②li、td、dd等經常大量連續出現，並且樣式相同或者相類似的標籤，我們採用類選擇器跟標籤名選擇器結合的後代選擇器 .xx li/td/dd {} 的方式選擇。

③極少的情況下會用ID選擇器，當然很多前端開發人員喜歡header，footer，banner，conntent設置成ID選擇器的，因為相同的樣式在一個頁面里不可能有第二次。

我們的目標是高效，簡介的css

所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找，其實瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如 DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進行查找的好處是為了儘早過濾掉一些無關的樣式規則和元素。

下面列出一些我們常見的寫CSS犯一些低效錯誤：

1.盡量不要在ID選擇器和class選擇器前使用標籤名

eg：

<div id="box">

<span class=「eg」>選擇器舉例</span>

</div>

<style>

div#box{...} /*一般寫法*/

#box{...} /*更簡便的寫法*/

span .eg{...} /*一般寫法*/

.eg{...} /*更簡便的寫法*/

</style>

註：但是當你的頁面中定義了多個叫eg的類時，需要有層級的寫法。

2.盡量少使用層級關係

一般寫法：#divBox p .red{color:red;}

更好寫法：.red{..}

3.使用class代替層級關係

一般寫法：#divBox ul li a{display:block;}

更好寫法：.block{display:block;}