---
# System prepended metadata

title: DAY16 - CSS 權重觀念
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / 進階篇']

---

# 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;
}
```
![](https://i.imgur.com/KNbcZ55.png)


---

```
// 若寫成:

.style1 {
  color: blue;
}
```

- 只會吃到 .style1 p

![](https://i.imgur.com/Oi5fMCJ.png)


---

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


![](https://i.imgur.com/53fmNaI.png)


### 最邪惡的屬性 !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 篇章 / 進階篇`