看了一下最近寫的css代碼,發現基本只用到了id選擇器(js裏)、後代選擇器和類選擇器(由於聽大牛推薦使用類選擇器,而後就開始大篇幅使用。。。)。因此想深刻學習一下css選擇器和css的效率優化,先記錄所學的一部分,以備後續補充。css
選擇器非官方中文版html
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查找。 |
避免使用子選擇器。 | 後代選擇器是開銷最最最最大的。 |
避免正則的屬性選擇器。 | |
刪除沒用的樣式。 | 用工具檢索是否用到。 |
結束語:誒,看了一圈發現仍是要用類選擇器...(捂臉)spa