CSS選擇器

看了一下最近寫的css代碼,發現基本只用到了id選擇器(js裏)、後代選擇器和類選擇器(由於聽大牛推薦使用類選擇器,而後就開始大篇幅使用。。。)。因此想深刻學習一下css選擇器和css的效率優化,先記錄所學的一部分,以備後續補充。

選擇器非官方中文版

w3c官方英文版

選擇器效率由高到低:

id選擇器（#myid）
類選擇器（.myclassname）
標籤選擇器（div,h1,p）
相鄰選擇器（h1+p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（*）
屬性選擇器（a[rel="external"]）
僞類選擇器（a:hover,li:nth-child）

在這裏，咱們須要知道的是瀏覽器是如何讀取選擇器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中說過「瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行」。

選擇器的最後一部分，也就是選擇器的最右邊,部分被稱爲「關鍵選擇器」，它將決定你的選擇器的效率如何？是高仍是低。「越具體的關鍵選擇器，其性能越高」。舉個例子： #myId span和span #myId誰的效率更高?答案是後者效率更高,由於後者的關鍵選擇器更具體。

選擇器優先級:

行內樣式就是這種語法的<標籤名 style="屬性1;屬性2;屬性3;屬性4">內容</標籤名>。例如這樣:

使用規則

規則	說明
行內樣式會被!important覆蓋。	不推薦使用!important。!important的優先級比行內優先級高,有時候樣式一直不生效就可能不知道在哪寫了個!important。
優先級不一樣的選擇器做用在同一元素上,優先級高的生效。
優先級相同的選擇器在同一元素上，之後出現的爲準。	若是一直修改一個樣式不生效，多是被後出現的同名選擇器給覆蓋了。。。。
選擇器越具體,優先級越高。
優先級相同，與元素近的選擇器生效。	head裏和.css文件裏，head裏的選擇器生效。

注:
!important說明:

若是不使用!important，第二個樣式會覆蓋第一個，可是因爲第一個有!important，因此在字號設置上優先級更高。

使用建議

建議	說明
避免將通用選擇器做爲通用選擇器。	匹配開銷大。
避免id選擇器用標籤和類。
避免class選擇器用標籤。
用class替換多層標籤選擇器。	減小css查找。
避免使用子選擇器。	後代選擇器是開銷最最最最大的。
避免正則的屬性選擇器。
刪除沒用的樣式。	用工具檢索是否用到。

結束語:誒,看了一圈發現仍是要用類選擇器...（捂臉）