iT邦幫忙

1

鼠年全馬鐵人挑戰 WEEK 05:CSS為什麼老是吃不到?讓我們來瞭解CSS權重!

以前我在寫css的時候,常常發現沒寫錯但為什麼沒反應?然後開始陷入debug迴圈,後來才發現是權重出了問題,我想這也是大家都經歷過的痛吧!

在剛開始寫CSS的時候,覺得要寫得很精準,寫到心坎裡,
所以會有過於仔細的現象,導致css的權重問題,不好維護。
例如:

html樣式

<div class="wrap">
 <ul class="list">
     <li><a href="#"><img src="img/example01">example01</a></li>
     <li><a href="#"><img src="img/example02">example02</a></li>
     <li><a href="#"><img src="img/example03">example03</a></li>
 </ul>    
</div> 

CSS樣式

.wrap .list ul li a img{
weight: 300px;
}

白話文:class name為wrap,下的class name為list,下的li,下的a,下的img
寬度為300px

其實只要這樣寫就可以了

.lsit a{
  width: 300px;
}

所謂的權重就是指 css 的優先權,例如:

  • 相同權重後寫的 css 可以覆蓋先寫的 css
  • 當兩個選擇器同時作用在一個元素,權重高的優先生效

但是這些權重是怎麼計算的呢?

基本權重大小

inline style > ID > Class > Element > *

我們以分數做為權重的大小,給分越高權重越高

'*' 0分

很常用到的全站預設值,所以只要權重超過就可以覆蓋過它的預設。

全站預設值
*{
    margin: 0;
	padding: 0;
	border: 0;
 }

https://ithelp.ithome.com.tw/upload/images/20200308/20124879xK7nAUI1OQ.png

Element 1分

Element 總共有哪些呢?下面列出部分常見的

html, body, div, span, h1, h2, h3, h4, h5, h6,
p,ol, ul, li,a,img...

https://ithelp.ithome.com.tw/upload/images/20200308/20124879Se7svYiLFO.png

class 10分

class在 html 上面會寫成 class="box" ,在 css內長這樣 .box ,前方會有一個點'.'

.box{ 
height: 300px;
}

https://ithelp.ithome.com.tw/upload/images/20200308/20124879YZPXF6YJu6.png

id 100分

在 html 上面是這樣寫的 id="box" ,在 css 內長這樣 #box,前方會帶井字號。

#box{
height: 300px;
}

https://ithelp.ithome.com.tw/upload/images/20200308/20124879CoGDRytD9I.png

inline style attribute 1000分

所謂的 inline style attribute 就是寫在 html 行內的 style

<div style="color:yellow">
    CSS Specificity
</div>

https://ithelp.ithome.com.tw/upload/images/20200308/20124879uyFFJmB4dR.png

範例

ul li 都是 element 所以加起來是 2分

body div ul li a span 總共 6 個 element 所以加起來是 6分

body.list 一個 element 加上一個 class ,所以是 1+10=11分

.myclass ul li  兩個 element 加上一個 class ,所以是 10+1+1=12分

最後最後的王牌叫做 !important

!important 的權重非常高,可以蓋過所有的權重

.box{
    height: 300px;!important
}

https://ithelp.ithome.com.tw/upload/images/20200308/20124879qR3dxnqdLH.png
只有 !important 能超越 !important,所以沒事不要亂用
這個意思是,當你在任何一段 css 裡面下了 !important,如果想要覆蓋原本的 css 又不直接改原本的檔案時,後來寫的 css 也必須加上 !important 才行。這樣會使得 css 很雜亂,因此如果了解權重,基本上用到 !important 的機會非常少。

.box{
    background-color: #000000;!important
}
.box{
    background-color:#ffffff;!important
}

結論

!important > inline style > ID > Class> Element > *

所以在寫css時要注意權重,才不會發生寫出來css正確,無法出現效果的情況。


尚未有邦友留言

立即登入留言