css選擇器優(yōu)先級學習

  1. 當初并不明白為什么要學css優(yōu)先級。感覺只要效果實現(xiàn)了就行。撐死了我寫的css執(zhí)行效率不高。
    但是當我去改別人的css的時候,優(yōu)先級的效果就顯現(xiàn)出來了。
    比如復(fù)寫樣式經(jīng)常會用到優(yōu)先級的問題,通常情況下
    ①首先少用!important②我的做法一般是增加一個class類名,但這樣顯然增加了樣式的冗余程度③以后多思考用css選擇優(yōu)先級在不增加類名的情況下解決樣式復(fù)寫問題。

css選擇器書寫的注意順序

后代選擇器

Tag category rules should never contain a child selector。標簽名后面永遠不要跟子元素。
"The most fundamental concept to learn is this rule filtering. The categories exist in order to filter out irrelevant rules (so the style system doesn’t waste time trying to match them)."

瀏覽器是怎么解析css的

div.nav > ul li a[title]
This last part of the selector (in this case a[title]) is called the “key selector” and it’s ultimately what will determine how efficient your selector will be.
Since a selector that fails is more efficient than if the same selector matches we want to optimize key selectors to fail. The more specific the key selector, the quicker the browser find mismatches.

關(guān)于!important的使用經(jīng)驗

Always look for a way to use specificity before even considering !important
Only use !important on page-specific CSS that overrides site-wide(全站范圍) or foreign CSS (from external libraries, like Bootstrap or normalize.css).
Never use !important when you're writing a plugin/mashup.
Never use !important on site-wide(全站范圍) CSS.

翻譯

Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important
Only 只在需要覆蓋全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定頁面中使用 !important
Never 永遠不要在你的插件中使用 !important
Never 永遠不要在全站范圍的 css 上使用 !important

參考文獻

  1. css優(yōu)先級
  2. Writing efficient CSS
  3. CSS Selectors: Should You Optimize Them To Perform Better?
  4. CSS Selector Performance has changed! (For the better)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前幾天七叔打電話說,越來越?jīng)]年味。家族里的人都分布在各地,在老家過年的人越來越少了,年味也就淡。 農(nóng)歷新年是典型的...
    門前池塘閱讀 329評論 0 0
  • 模因池:基情 顏值 兄弟 英雄 生死 眾所周知,“基”之本意,指某種不符合達爾文經(jīng)典進化論的性行為取向,這一原本雜...
    世界的賓格閱讀 1,477評論 0 2
  • 一次朋友邀請參加他們舉辦的論壇,詢問我是否需要幫打印個桌牌?我有些退縮,覺得自己沒有與論壇相應(yīng)的價值,就婉拒了。 ...
    小胡串閱讀 216評論 0 0
  • 今天晚上,我寫完了作業(yè)我和媽媽開始種吊蘭。我們先把土裝進花盆里,然后我們再從大吊蘭上摘下一些小的吊蘭,種到花盆兒里...
    靜如思閱讀 208評論 0 1
  • 摘自:《空行法教·第四章》 蓮師說:人們修持佛法的方式不會有任何成就。 佛母問:這怎么說? 上師說: 在授予法教時...
    了義讀經(jīng)閱讀 497評論 0 0

友情鏈接更多精彩內(nèi)容