国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS選擇器

qpwoeiru96 / 896人閱讀

摘要：優先級相同，與元素近的選擇器生效。使用建議建議說明避免將通用選擇器作為通用選擇器。避免選擇器用標簽。避免使用子選擇器。后代選擇器是開銷最最最最大的。

看了一下最近寫的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查找。
避免使用子選擇器。 后代選擇器是開銷最最最最大的。
避免正則的屬性選擇器。
刪除沒用的樣式。 用工具檢索是否用到。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117251.html

相關文章

  • WEB前端 CSS

    摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標簽選擇器后跟標簽后代，無論直屬還是間接直屬，直接后代毗鄰后代中最近的一個弟弟，找到和自己同級的標簽如通過多個選擇器好到具體的標簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結構 CSS選擇器 標簽選擇...

    darry 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...

    forrest23 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...

    hyuan 評論0 收藏0

  • 前端面試題-CSS選擇器性能優化

    摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

    Scott 評論0 收藏0

  • 前端面試題-CSS選擇器性能優化

    摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

    XGBCCC 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<