個人部落格了解一下:obkoro1.com!important 優先順序最高,但也會被權重高的important所覆蓋
行內樣式總會覆蓋外部樣式表的任何樣式(除了!important)
單獨使用乙個選擇器的時候,不能跨等級使css規則生效
如果兩個權重不同的選擇器作用在同一元素上,權重值高的css規則生效
如果兩個相同權重的選擇器作用在同一元素上:以後面出現的選擇器為最後規則.
權重相同時,與元素距離近的選擇器生效
在同乙個元素使用不同的方式,宣告了相同的一條或多條css規則,瀏覽器會通過權重來判斷哪一種方式的宣告,與這個元素最為相關,從而在該元素上應用這個宣告方式宣告的所有css規則。
!important>行內樣式》id選擇器 > 類選擇器 | 屬性選擇器 | 偽類選擇器 > 元素選擇器
複製**
不推薦使用!important
,因為!important
根本沒有結構與上下文可言,並且很多時候權重的問題,就是因為不知道在**定義了乙個!important
而導致的。
覆蓋important:
雖然我們應該盡量避免使用!important,但你應該知道如何覆蓋important,加點權重就可以實現,codepen的demo
//!important 優先順序最高,但也會被權重高的important所覆蓋
aaa#a
.a複製**
無論多少個class組成的選擇器,都沒有乙個id選擇器權重高。類似的,無論多少個元素組成的選擇器,都沒有乙個class選擇器權重高、無論多少個id組成的選擇器,都沒有行內樣式權重高。
codepen的demo;
在demo中使用了11個class組成乙個選擇器,最後還是乙個id選擇器,設定的樣式生效。
複製**
可以想象在玄幻**的那種等級制度,沒有突破那個等級,就沒有可比性。
所以權重是在雙方處於同一等級的情況下,才開始對比。
選擇器可能會包含乙個或者多個與權重相關的計算點,若經過權重值計算得到的權重值越大,則認為這個選擇器的權重高。舉乙個簡單的栗子:
.test #test // id 100+class 10=110;
.test #test span{} // id 100+class 10+span 1=111;
.test #test .sonclass{} // id 100+class 10+class 10=120; //生效
複製**
demo
#test span
color: red;
}複製**
比如不同的style表,head頭部等,來看下面的栗子:
#content h1 複製**
避免使用!important
;
利用id增加選擇器權重;
減少選擇器的個數(避免層層巢狀);
個人blogand掘金個人主頁
以上2018.5.19
你對CSS權重真的足夠了解嗎?
個人部落格了解一下 obkoro1.com important 優先順序最高,但也會被權重高的important所覆蓋 行內樣式總會覆蓋外部樣式表的任何樣式 除了 important 單獨使用乙個選擇器的時候,不能跨等級使css規則生效 如果兩個權重不同的選擇器作用在同一元素上,權重值高的css規則...
前端深入之css篇 你真的了解「權重」嗎?
權重這個概念,相信對許多進行過前端開發的小夥伴來說肯定並不陌生,有時候乙個樣式新增不上,我們就會乙個 important懟上去,一切就好像迎刃而解了。但還有的時候,important也並不能解決我們的問題,下面請跟隨我來詳細了解一下css的權重吧!指某一因素或指標相對於某一事物的重要程度,其不同於一...
你真的了解嗎 CSS 溢位 浮動 定位
position sticky overflow 屬性用於控制內容溢位元素框時顯示的方式 屬性值描述 visible 預設值。內容不會被修剪,會呈現在元素框之外 hidden 內容會被修剪,並且其餘內容是不可見的 scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容 auto 如果內...