- 當初并不明白為什么要學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