# DAY16 - CSS 權重觀念

### 權重計算大綱:

- HTML TAG - 1分
- .class - 10分
- #id - 100分
- HTML Style - 1000分

---

### 範例學習:

    <p>1234</p>   // 1分
    <p class="style1">1224</p> // p+class 11分

- 套用下列 css 預期兩個 p 都將變成藍色。

p {
  color: blue;
}


---

// 若寫成:

.style1 {
  color: blue;
}

- 只會吃到 .style1 p


---

### 透過 css 選擇器計算機網頁分析過的差異分數比較圖：


### 最邪惡的屬性 !important:

- 使用這個屬性，基本上什麼權重都可以無視了，因為無法被修改。

// 使用方式:

.style1 {
  color: blue !important;
}

---

### 結語:

- **當權重分數一樣時**，最新撰寫的 selector 會覆蓋掉舊的。

---

#### 本節學習資源參考以下:

1. [小事之 CSS 權重 (css specificity)](https://ithelp.ithome.com.tw/articles/10196454)

2. [Specificity Calculator](https://specificity.keegan.st/)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 進階篇`