What is Specificity?

What if the selector is different?
給定一個元素, 還有兩個不同的選擇器去選擇樣式規則, 但此時該選擇哪個樣式規則來套用呢?

html:

<p id="text">
  Really cute, really stylish
</p>

css:

#text {
  color: pink;
}
p {
  color: blue;
}

#text 是 id 選擇器, p 是元素選擇器, 而 id 選擇器比元素選擇器擁有更高的權重, 優先權 (Specificity), 所以優先選擇 #text css 樣式規則。

Specificity Scores:

當瀏覽器讀取你的 CSS 源始碼時，它會計算每個選擇器的分數。但是你不太會看到這些數字，它們可能看起來像 0022 或 1000。
了解瀏覽器如何決定哪個選擇器比另一個選擇器更有優先權是有規則的。

在這邊推薦一個好用的 CSS Specificity 計算機,
https://specificity.keegan.st/

要計算和比較 CSS 選擇器間的權重, 可以在 local 安裝 JavaScript 模塊: npm install specificity
此模塊就是運用於 CSS 選擇器權重計算器網站 (Specificity Calculator) 上的。

首先, 你需要知道的基本 CSS 權重規則:

inline style > ID > Class/psuedo-class/attribute > Element > *

1. *(全站預設值, select all elements)

   * {
     background-color: #2c2c2c;
     color: #e0e0e0;
   }
   

   Specificity Scores: 0,0,0,0

2. Element
   article, footer, header, nav, div, p, li, ul, a, br, em,...

   Specificity Scores: 0,0,0,1

3. Class, psuedo-class, attribute

   Specificity Scores: 0,0,1,0

4. ID

   Specificity Scores: 0,1,0,0

5. inline style: the style assigned inside html

   <div style="color:#e0e0e0">
       What is CSS Specificity?
   </div>
   

   Specificity Scores: 1,0,0,0

! important

! important 具有 最高級 的權重, 它比上述所有的選擇器都擁有更高的優先權。
不過, 如果想要保持易於維護的 css 檔案, 需要盡量減少 ! important 的使用。
因為如果想要覆寫有 ! important 的 CSS, 必須要再加上 ! important, 太多的 ! important 存在會增加 CSS 檔的複雜性。

什麼時候可以使用到 !important?
覆蓋難以更改的 CSS 樣式時, 可以適當的加上 ! important

// old css style
div p { height: 30px !important; }
    
// new css style
#my-container div p { height: 50px !important; }