---
# System prepended metadata

title: 20230408 CSS權重計算
tags: [前端課程筆記]

---

# 20230408 CSS權重計算

### 一般權重
以a、b、c三種權重比較，比較順序a->b->c，如果權重相同，就是看誰比較晚宣告：
a: ID Selectors
b: Class/Attribute/Pseudo-Element Selectors
c: Type/Pseudo-Element Selectors
`*Universal不算權重` 
![](https://i.imgur.com/GFIaPlU.png)

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

parent的屬性自動被繼承時，後child也有指定該屬性，就不會繼承parent的
例如color是個可以從父層繼承到子層的屬性

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

當有指定到該屬性，就需要比權重

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

### 特殊權重
#### inline style
![](https://i.imgur.com/I2xT3qU.png)

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

#### !important
若inline style加上!important就真的權重無限大

#### Cascade Layer
定義方式: @layer name {...(一般CSS語法)...}
規則: 
1. 後定義的會優先於先定義的

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

2. 也可以不給名字，會是一個匿名層

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

3. 沒有包@layer的會優先於所有有包@layer的

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

4. 可使用巢狀結構定義，外層會優先於內層

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

5. 可在最前面宣告順序，越後面越優先

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

6. 有使用@layer的內容，當其layer優先權較高時，即使一般權重較小仍會被套用

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

7. inline style 與 !important在@layer中仍勝過一切

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

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

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

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