資訊專欄INFORMATION COLUMN
摘要：優(yōu)先級相同，與元素近的選擇器生效。使用建議建議說明避免將通用選擇器作為通用選擇器。避免選擇器用標簽。避免使用子選擇器。后代選擇器是開銷最最最最大的。
看了一下最近寫的css代碼,發(fā)現(xiàn)基本只用到了id選擇器(js里)、后代選擇器和類選擇器(因為聽大牛推薦使用類選擇器,然后就開始大篇幅使用。。。)。所以想深入學(xué)習(xí)一下css選擇器和css的效率優(yōu)化,先記錄所學(xué)的一部分,以備后續(xù)補充。
選擇器非官方中文版
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》一文中說過“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行”。
選擇器的最后一部分，也就是選擇器的最右邊,部分被稱為“關(guān)鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低?！?b>越具體的關(guān)鍵選擇器，其性能越高”。舉個例子： #myId span和span #myId誰的效率更高?答案是后者效率更高,因為后者的關(guān)鍵選擇器更具體。
選擇器優(yōu)先級:
行內(nèi)樣式就是這種語法的<標簽名 style="屬性1;屬性2;屬性3;屬性4">內(nèi)容。例如這樣:
| 規(guī)則 | 說明 |
| 行內(nèi)樣式會被!important覆蓋。 | 不推薦使用!important。!important的優(yōu)先級比行內(nèi)優(yōu)先級高,有時候樣式一直不生效就可能不知道在哪寫了個!important。 |
| 優(yōu)先級不同的選擇器作用在同一元素上,優(yōu)先級高的生效。 | |
| 優(yōu)先級相同的選擇器在同一元素上，以后出現(xiàn)的為準。 | 如果一直修改一個樣式不生效，可能是被后出現(xiàn)的同名選擇器給覆蓋了。。。。 |
| 選擇器越具體,優(yōu)先級越高。 | |
| 優(yōu)先級相同，與元素近的選擇器生效。 | head里和.css文件里，head里的選擇器生效。 |
注:
!important說明:
如果不使用!important，第二個樣式會覆蓋第一個，但是由于第一個有!important，所以在字號設(shè)置上優(yōu)先級更高。
| 建議 | 說明 |
| 避免將通用選擇器作為通用選擇器。 | 匹配開銷大。 |
| 避免id選擇器用標簽和類。 | |
| 避免class選擇器用標簽。 | |
| 用class替換多層標簽選擇器。 | 減少css查找。 |
| 避免使用子選擇器。 | 后代選擇器是開銷最最最最大的。 |
| 避免正則的屬性選擇器。 | |
| 刪除沒用的樣式。 | 用工具檢索是否用到。 |
結(jié)束語:誒,看了一圈發(fā)現(xiàn)還是要用類選擇器...（捂臉）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117251.html
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關(guān)系?，F(xiàn)在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關(guān)鍵選擇器寫代碼的時候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...
摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關(guān)系。現(xiàn)在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關(guān)鍵選擇器寫代碼的時候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...
摘要：不要在編寫規(guī)則時用標簽名或類名不要在編寫規(guī)則時用標簽名把多層標簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優(yōu)先級 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個CSS規(guī)則的頁面元素。 作為一個網(wǎng)站的前端開發(fā)工程師，應(yīng)該避免編寫一些常見的開銷很大的CS...
摘要：不要在編寫規(guī)則時用標簽名或類名不要在編寫規(guī)則時用標簽名把多層標簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優(yōu)先級 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個CSS規(guī)則的頁面元素。 作為一個網(wǎng)站的前端開發(fā)工程師，應(yīng)該避免編寫一些常見的開銷很大的CS...
閱讀 1059·2021-10-11 10:59
閱讀 3610·2021-09-26 09:55
閱讀 905·2019-08-30 15:55
閱讀 2659·2019-08-30 15:44
閱讀 443·2019-08-30 14:06
閱讀 689·2019-08-30 11:26
閱讀 3349·2019-08-30 10:49
閱讀 2499·2019-08-29 12:53
