CSS選擇器

看了一下最近寫的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

相關文章
相關標籤/搜索