css權(quán)重
經(jīng)常會(huì)遇到這樣一種問(wèn)題止吁，為什么我寫(xiě)的css并沒(méi)有達(dá)到我所期望的效果淋硝，很奇怪我注釋掉這行代碼對(duì)頁(yè)面并沒(méi)有什么影響--
也是自己對(duì)css規(guī)則并沒(méi)有一個(gè)透徹的了解..
這里就來(lái)簡(jiǎn)單寫(xiě)一下關(guān)于css的權(quán)重，我覺(jué)得了解了權(quán)重的概念父能，能讓你寫(xiě)css時(shí)更加得心應(yīng)手神凑，減少一些代碼冗余和調(diào)試時(shí)間
權(quán)重也就是你這個(gè)元素選擇器能PK掉其他選擇器的幾率，當(dāng)然權(quán)重大的就能被瀏覽器在頁(yè)面元素上應(yīng)用（相同權(quán)重就以最后出現(xiàn)的為準(zhǔn) 很容易理解 后面覆蓋前面嘛）何吝，一個(gè)元素css規(guī)則可以從特定ID或類選擇器得到溉委，也可以繼承而來(lái)，如果你從外部引入了一些框架爱榕，還有一些默認(rèn)的css樣式瓣喊，當(dāng)然也可以在html中直接定義style（一般這種寫(xiě)法是淘汰的，不適合多文檔應(yīng)用呆细，冗余型宝，修改麻煩等等...）所以權(quán)重只有在同一個(gè)元素有多個(gè)聲明的時(shí)候有意義..
關(guān)于權(quán)重級(jí)別（越往下權(quán)重越大）
-
用戶代理聲明（比如瀏覽器的一些默認(rèn)樣式
不過(guò)經(jīng)過(guò)CSS Reset和Normalize.css一般我也沒(méi)有很注重去修改瀏覽器的默認(rèn)樣式 -
開(kāi)發(fā)者選項(xiàng) F12
我們經(jīng)常會(huì)通過(guò)開(kāi)發(fā)者選項(xiàng)來(lái)調(diào)試看怎樣的樣式更加符合自己的要求
-
開(kāi)發(fā)者聲明
- 選擇器（注意嵌套定義 一般是標(biāo)簽越詳細(xì) ID或者class級(jí)數(shù)越多權(quán)重越大）
- 一些插件和框架中的全局css
- 內(nèi)在指定style會(huì)覆蓋外部引用style
!important
前幾天在代碼的時(shí)候發(fā)現(xiàn)自己怎么寫(xiě)干不掉框架內(nèi)部定義的樣式 所以就google了一下怎樣使用!important
當(dāng)你在一個(gè)樣式中聲明！important的時(shí)候 會(huì)直接覆蓋掉其他聲明 也就是一種增加權(quán)重的方式
小范圍使用還好 如果在你定義一個(gè)全局范圍使用的類但是你只需要在這一個(gè)地方修改樣式 這樣修改就會(huì)跳出很多Bug
所以怎樣使用!important
- !important 一般寫(xiě)在樣式最后 分號(hào)前面 來(lái)達(dá)到效果
- 全局屬性內(nèi)部全部覆蓋
.example{ border-radius: 1px !important; }
等價(jià)于
.example{
border-top-right-radius: 1px !important;
border-bottom-right-radius: 1px !important;
border-top-left-radius: 1px !important;
border-bottom-left-radius: 1px !important;
}
這里就引用一下 我覺(jué)得挺重要的幾個(gè)點(diǎn)
- Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important
- Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁(yè)面中使用 !important
- Never 永遠(yuǎn)不要在你的插件中使用 !important
- Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問(wèn)題而不是 !important
回來(lái)改改錯(cuò)誤 嗯..下次見(jiàn)
2016/11/16
amilyxy
