2019年4月20日 星期六

CSS選擇器的權重大小一覽

閱讀這篇文章前   請先具備

CSS Selectors

實際撰寫與嘗試的經驗

在開發時,常常會發現給標籤添加樣式,卻沒效果的這種情況

這種情況分成兩種
1.選擇器寫錯、選錯標籤
2.選對了、但被其他的樣式覆蓋掉了

CSS的樣式被覆蓋的現象、就是權重問題

對權重問題理解不夠深的話,很容易就進入一段時間沒有產出的情況

#被覆蓋的樣式可透過F12看到,他們是被槓掉的

那麼來寫一下範例

body{
    margin: 0;
}
選到了body標籤,此時的權重假設為1、代表他能幹掉權重小於1的樣式

此時打開F12,會發現body{margin: 8px;}被幹掉了,這個樣式是chrome瀏覽器的預設樣式
也就是說body本身就有預設的margin,這個樣式被稱為預設樣式,權重為0

接著
body{
    margin: 0;
}
body{
    margin: 5px;
}

此時,body的margin為5px
在相同權重下,後面添加的樣式會幹掉前面的,我們假設他為1.1

再來
body{
    margin: 0;
}
body{
    margin: 5px;
}

html  body{
    margin: 10px;
}

此時,body的margin為10px
標籤是有疊加權重的,選到html底下的body,也就是說途中標籤選取器經過(但不選取)html,選到底下的body,此時的權重會是2,也就是1+1,但很重要的事情是,不管這個權重怎麼加,也不會超過class或id這兩種選取器

基礎觀念都有了、那接下來就一併列出吧

body{//1

}
body{//1.1

}
html body{//2

}
html body{//2.1,因為後寫的關係,所以增加0.1

}
.body{//10,你沒看錯,就是10,但標籤選取器的權重怎麼疊加都幹不掉這個10

}
html .body{//1+10=11

}
.html .body{//10+10=20

}
.html .body{//10+10=20,與上方權重相同,因為後寫的關係,所以為20.1

}
#body{//100

}
#html .body{//100+10=110

}
.html #body{//10+100=110,與上方權重相同,因為後寫的關係,所以為110.1,如果後寫的是#html .body,那麼#html .body就能幹掉.html #body

}
#html #body{//100+100=200

}

#html #div div .body{//100+100+1+10=211

}

行內樣式//權重1000
<body margin='20px'></body>

body{
    margin: 0px !important;//這樣寫,權重10000
}

沒有留言:

張貼留言

有興趣或有疑問的歡迎提問與交流喔!!!