---
# System prepended metadata

title: "\U0001F3C5 Day 11 - CSS 權重覆蓋"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 11 - CSS 權重覆蓋

使用不同的選擇器選取同一個元素時，若設定相同樣式會出現樣式覆蓋狀況，此時會遵循 CSS 權重規則決定套用哪一個樣式，下方以優先順序高到低排列
1. !important：最高級，建議非必要情況少用，因為要想覆蓋它只能使用同樣的 !important，容易導致後續維護困難
2. 行內樣式（Inline Styles）：寫在標籤中的樣式，平常也不建議使用，因為這種寫法不好管理樣式，缺乏重用性
3. ID 選擇器：以 # 開頭的選擇器，一般用於 JS 相關設定，因權重過高也不適合用於撰寫樣式
4. class 選擇器：以 . 開頭的選擇器，是最常見用於設定樣式的選擇器
5. 元素選擇器：即 HTML 標籤本身，因標籤重複性高也不建議使用該選擇器來設定樣式

此外，假設是兩個相同選擇器的情況，會由後設定覆蓋前設定的順序來套用樣式。

> 口訣：先看權重，再看先後
> 若還不熟悉權重可以參考這篇[文章](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity#%E4%BC%98%E5%85%88%E7%BA%A7%E6%98%AF%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%E7%9A%84%EF%BC%9F)

### 題目

**觀看各題程式碼回答問題**

1. 請問 p 標籤內文字是什麼顏色

    HTML
    ```htmlembedded=
    <p class="blue red black">這是藍色ㄉ文字</p>
    ```
    CSS

    ```css=
    p {
      color: white;
    }

    .black {
      color: black;
    }

    .blue {
      color: blue;
    }

    .red {
      color: red;
    }

    ```
    
2. 請問 p 標籤內文字是什麼顏色

    HTML
    ```htmlembedded=
    <p class="a p">這是藍色ㄉ文字</p>
    ```
    CSS

    ```css=
    p {
      color: white;
    }

    .p {
      color: blue;
    }

    a {
      color: red;
    }
    ```
    
3. 請問 p 標籤內文字是什麼顏色

    HTML
    ```htmlembedded=
    <p class="p blue" id="blue">這是藍色ㄉ文字</p>
    ```
    CSS

    ```css=
    .p {
      color: blue;
    }

    .blue {
      color: red;
    }

    p.blue {
      color: green;
    }

    #blue {
      color: white;
    }
    ```
    

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：
1. red
2. blue
3. white
-->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 孟 |[Codepen](https://codepen.io/Mengru0503/pen/XJbQbMZ ) |
| 2 |  Jenna |[Codepen](https://codepen.io/abiscc14/pen/azOxOyj) | 
| 3 |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/GgJLJQg) |
|4| Saika|[Codepen](https://codepen.io/saika4501/pen/YPXMXem) |
| 5 |  Esther  |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/MYwRwqQ) |
| 6 |  牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/pvJBJQp) |
| 7 |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/GgJLJYp) |
| 8  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/MYwRwQO)|
| 9  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/gbpypEM)|
| 10 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/XJbQmWo?editors=1100)|
| 11 |  Joseph_Kyuu  |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/qEdwORE) | 
| 12 |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/OPVGypj) | 
| 13 |  Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/yyNrYpG) | 
|  14  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/PwqgPRO) |
| 15 |  那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/NPqmGXM) |
| 16 |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYGZWpJ) | 
| 17 |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/OPVGNxy) | 
| 18 |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/vEOMGEb) |
| 19 |  Sid  |[Codepen](https://codepen.io/monkeybear721/pen/VYLNjev) |
| 20 |  力文  |[Codepen](https://codepen.io/liwenchiou/pen/jEPRrZv) |
| 21 |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/ZYGZOxZ?editors=1100) |
|  22  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/NPqmrEB) |
|  23  |  Yan*  |[Codepen](https://codepen.io/Yan-L/pen/yyNrJQw)) |
|  24  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/OPVGNmV) |
|  25  |  Hao  |[Codepen](https://codepen.io/abiscc14/pen/azOxOyj) |
|  26  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/PwqgGNB) |
|  27  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/emNodWJ) |
|  28  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/OPVGNLK?editors=1100) |
|  29  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/WbvWoox) |
|  30  |  Fang  |[Codepen](https://codepen.io/Fang-the-encoder/pen/EajJNOd) |
|  31  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/LEVvxMZ) |
|  32  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/qEdwbRj) |
|  33  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/azOxJbN) |
|  34  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/MYwRpPe) |
|  35  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/ogXOWbP) |
|  36  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=bNdJWQg) |
|  37  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/GgJLEMW?editors=1100) |
|  38  |  LouisaFish  |[Codepen](https://codepen.io/Louisa-Fish/pen/raVbzOV?editors=1100) |
|  39  | Evelyn |[Codepen](https://cdpn.io/pen/debug/MYwRrGa?authentication_hash=bZMQWpZZDxbA) |
|  40  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/jEPRKYy) | 
|  41  |  西娜|[Codepen](https://codepen.io/Sheena-the-encoder/pen/wBaZEME) |
|  42  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/myJgabB) |
|  43  |  TY  |[Codepen](https://codepen.io/Ted-Y/pen/MYwRxVz) |
|  44  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/yyNrrgm) |
|  45  |  Scrooge  |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/gbpyJmN) |
| 46 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/JodVqyZ)
| 47 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/MYwRMMR)
|  48  |  Peggy  |[Codepen](https://codepen.io/Peggy_C/pen/YPXbKyJ) |
|  49  |  suemma  |[Codepen](https://codepen.io/suemma/pen/EajzjwQ)|
|  50  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/YPXbwKZ?editors=1100) |
|  50  |  kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/xbGNOjv) |
|  51  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/OPVYRVQ) |
|  52  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/yyNWaEL?editors=1100) |
|  53  |  Satar  |[Codepen](https://codepen.io/SatarKuo/pen/NPqVRVZ) |
|  54  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/EajzNjX) |
|  55  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/VYLOmLd) |
|  56  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/EajzwPX) |
|  57  |  Geno Chen  |[Codepen](https://codepen.io/kai-chen-the-sans/pen/MYwdrRa) |
|  58  |  随縁  |[Codepen](https://codepen.io/anki0072011/pen/myJZBvg) |
|  59  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/myJZaQq) |
|  60  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/ogXKgJY) |
|  61  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/vEOoNxw) |
|  62  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/gbpVwOw) |
|  63  | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/GgJVxWV) |
|  64  | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/xbGBBdx) |
|  65  | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/xbwbGRK) |
|  66  | 雅潔 |[Codepen](https://codepen.io/MOMOYA/pen/jEbPWrW) |
|  67  | B |[Codepen](https://codepen.io/Babel777/pen/EaVjWBe) |
|  68  | Fancy |[Codepen](https://codepen.io/Fancy-the-lessful/pen/VYvvzrB?editors=1100) |
|  69  | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/myeeMRz) |
| 70 | water | [Codepen](https://codepen.io/wateruby/pen/LEppXyG)|
|  71  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/dPYGvrK) |
|  72  |  Lucy  |[Codepen](https://codepen.io/Lucytrycode/pen/qEOZqVy) |
|73| 小趴| [Codepen](https://codepen.io/papa2415/pen/zxvqwwE)|
|  74  |  Sylvie  |[Codepen](https://codepen.io/shuping-xiao/pen/JoYXNBa) |
|  75  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/vENGdQw?editors=1100) |
|  76  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/PwPGrvN?editors=1000) |
| 77 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/LEpbjZK) |
|  78  |  cindy  |[Codepen](https://codepen.io/a50134/pen/NPGbVOo) | 
| 79 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/empgwxW?editors=1100)|
|  80  |  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/YPyrWRG) |
|  81  |  Mini  |[Codepen](https://codepen.io/miiinii32-Cheng/pen/OPyQKBm) |
| 82 | 4ping | [Codepen](https://codepen.io/928Libra/pen/raOKNEj)
|  83  |  maerc  |[Codepen](https://codepen.io/Lu-Liangyu/pen/qEOJGLJ) |
|  84  |  Wafa  |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ZYbVZMZ?editors=1100) |
|  85  |  PAgaNiNi  |[Codepen](https://codepen.io/PA-OTTER/pen/bNVJJQB?editors=1100)|
|  86  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/raxewMa?editors=1100)|



<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->

