iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
2

在學習 CSS 的時候,一定會先認識什麼是 html element、什麼是 class、什麼是 id,什麼是 css 的 inline 寫法。了解基本的 css 之後,有一個東西一定要先了解,那就是 css 權重。

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

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

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

先說一下基本的權重大小

inline style > ID > Class > Element > *

那麼來看他們的權重吧

以下的圖,最左邊的權重最高,最右邊的權重最低。

*

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

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

Element

所有的 Element 的權重都是 0-0-0-1。
Element 總共有哪些呢?下面列出部分常見的,其他的請參考 MDN

div, p, ul, ol, li, em, header, footer, article....

class

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

每一個 class 的權重都是 0-0-1-0。

id

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

每一個 id 的權重都是 0-1-0-0。

inline style attribute

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

inline style attribute 的權重為 1-0-0-0 。

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

除了這些還有

除了上面講到的那些,大家一定會常看到

  • psuedo-class(偽類),如:
:nth-child() 、 :link 、 :hover 、 :focus 等
:only-of-type 、 :nth-of-type
  • attribute(屬性選擇器),如:
[type:checkbox]、[attr]

這兩個的權重跟 class 是一樣的,都是 0-0-1-0 。

那麼來試試看

ul>li 都是 element 所以加起來是 0-0-0-2

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

li.myclass 一個 element 加上一個 class ,所以是 0-0-1-1

li.myclass ~ li 兩個 element 加上一個 class ,所以是 0-0-1-2

form input[type=email] 兩個 element 、一個 attribute,所以是 0-0-1-2

還有一個終極大魔王叫做 !important

!important 的權重非常高,可以蓋過所有的權重
用法如下:

.product{
    width: 200px;!important
}

只有 !important 能超越 !important,所以沒事不要亂用

這個意思是,當你在任何一段 css 裡面下了 !important,如果想要覆蓋原本的 css 又不直接改原本的檔案時,後來寫的 css 也必須加上 !important 才行。這樣會使得 css 很雜亂,因此如果了解權重,基本上用到 !important 的機會非常少。

.box{
    background-color: #f00;!important
}
.box{
    background-color: #aaa;!important
}

結論

!important > inline style > ID > Class/psuedo-class(偽類)/attribute(屬性選擇器) > Element

因此在寫 css 要很注意你寫的權重,才不會發生寫出來的 css 無法出現效果的情況。

以上是今天介紹的 CSS 權重。 各位看倌明天見囉~

參考資料:
[1] https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element
[2] http://cssspecificity.com/
[3] https://coding.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/


上一篇
Day19:小事之 Google form 的運用
下一篇
Day21:小事之 CSS Reset 與 CSS normalize
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言