閱讀這篇文章前 請先具備
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
}
沒有留言:
張貼留言
有興趣或有疑問的歡迎提問與交流喔！！！