A-Ming-Design

CSS specificity ( CSS 權重)

2019 年 9 月 24 日

到底什麼是CSS權重呢?

所謂CSS權重就是指CSS的優先權。一般而言,權重相同者,後寫的CSS會覆蓋前面的CSS;若選擇器同時作用在一個元素時,則權重高的會優先生效。因此在撰寫 css 時,要極為注意其權重,以避免發生 css 無法出現效果的情況。

CSS權重大小→!important>inline style > ID > Class > Element > *
CSS權重展示圖 以上圖為例,同一個 box 中,有 id 及 class,其中 id 的權重大於 class,因此不論 class 是放在上面或是下面,背景顏色都無法更改 id 的黃色背景,以下將分訴說明之。

1) * 的權重最小,如上圖所示,我們把margin或padding全都設0,不過在下方 html 撰寫「style="padding:20px"」,因此文字的四邊都有 20PX 的距離。

2) Element(元件),一般我們常用的div則為Element,它的權重也僅次於 *,因此若沒 *,Element的權重可說是最小的一類。當然Element不只div一類,其他常見的尚有:header、nav、footer、ol、ul、li、p ...等。

3) Class一般在html裡常搭配div來寫,例如「div class="box"」,若寫在CSS上則變成「 .box」,而它的權重一定比 Element高,因為它除了div外上多了一個Class。

4) Id與上面的Class寫法相似,在html上的寫法為「div id="box"」,若寫在CSS上則變成「#box」,不過它的權重又比Class來的高。因為每類Id只能有一個,不得重複使用,不像Class是可重複使用的。

5) Inline style一般是直接寫在html行內加入style,而不是另外寫在CSS上,例如 「style="color:red"」,因此它的權重會高於其它。

6) !important是權重最高的一個,不論上述五種是排在最前或排在最後,均無法與他抗衡。唯一能與他抗衡的也只有寫在後方的!important,寫法如下:
.box { width: 300px ; !important }。

文章分類

  • RWD
  • CSS
  • 其它