---
# System prepended metadata

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

---


> 口訣：先看權重再看先後
> 若還不熟悉權重可以參考這篇[文章](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 / 答案                                                                            |
|:---:|:---------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| 01  |     pinyi_9     |                                                           [Codepen](https://codepen.io/Wpypy/pen/GRwGwJK)                                                            |
| 02  |     Calvin      |                                                        [Codepen](https://codepen.io/CalvinChang/pen/bGQKQdp)                                                         |
| 03  |     Moreene     |                                                          [CodePen](https://codepen.io/Moreene/pen/abQKQbG)                                                           |
| 04  |       AYA       |                                                        [Codepen](https://codepen.io/NoNameNote/full/NWEzEGr)                                                         |
| 05  |     shcopy      |                                                           [codepen](https://codepen.io/shcopy/pen/YzRvRXM)                                                           |
| 06  |     Mattie      |                                                         [Codepen](https://codepen.io/mattielin/pen/MWzXzjE)                                                          |
| 07  |      Tami       |                                                     [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/oNQyQLm)                                                      |
| 08  |    ryan.chou    |                                                          [Codepen](https://codepen.io/csw8524/pen/jOQKQqB)                                                           |
| 09  |     Mylène      |                                                        [Codepen](https://codepen.io/hamajibashi/pen/wvQXQMM)                                                         |
| 10  |     bf_tsai     |                                                          [Codepen](https://codepen.io/BF-Tsai/pen/yLQEQeX)                                                           |
| 11  |     ann6212     |                                             [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/BaGVGQK?editors=1100)                                             |
| 12  |       Yu        |                                                        [Codepen](https://codepen.io/yuch3n_chen/pen/NWEzENR)                                                         |
| 13  |   runweiting    |                                                         [Codepen](https://codepen.io/weiting14/pen/OJaEaWM)                                                          |
| 14  |       m_m       |                                                         [Codepen](https://codepen.io/minnn7716/pen/BaGVGpK)                                                          |
| 15  |     銀光菇      |                                                       [Codepen](https://codepen.io/genesynthesis/pen/jOQKQWy)                                                        |
| 16  |      Brian      |                                                        [Codepen](https://codepen.io/PochienTsai/pen/XWyYyRY)                                                         |
| 17  |     Berlin      |                                                          [Codepen](https://codepen.io/3qberlin/pen/YzRvRVm)                                                          |
| 18  |      小夏       |                                                  [Codepen](https://codepen.io/michaelhsia/pen/vYQrQEw?editors=1100)                                                  |
| 19  |    eric0529     |                                                        [Codepen](https://codepen.io/delichaomoon/pen/eYQKQer)                                                        |
| 20  |     SmallP      |                                                           [Codepen](https://codepen.io/smallp/pen/dyQKQVB)                                                           |
| 21  |    墨墨#4571    |                                                          [Codepen](https://codepen.io/momof2e/pen/KKrerRy)                                                           |
| 22  |    SKey#9905    |                                                         [Codepen](https://codepen.io/Dale-Chien/pen/vYQrQzO)                                                         |
| 23  |     zhu.lin     |                                                       [Codepen](https://codepen.io/codepenplayer/pen/PoxaxXb)                                                        |
| 24  |   Rochel#4754   |                                                       [Codepen](https://codepen.io/rochelwang1205/pen/qBQKQge)                                                       |
| 25  |    kuanju27     |                                                         [Codepen](https://codepen.io/Eero-Chiao/pen/MWzXzZX)                                                         |
| 26  |    lychee_kk    |                                                          [Codepen](https://codepen.io/kakakala/pen/yLQEQwE)                                                          |
| 27  |      awei       |                                                          [Codepen](https://codepen.io/hong-wei/pen/oNQyQRg)                                                          |
| 28  |    hannahTW     |                                                   [Codepen](https://codepen.io/hangineer/pen/OJaEaVV?editors=1011)                                                   |
| 29  |  Atsushi#6888   |                                                       [Codepen](https://codepen.io/atsushi-amuro/pen/QWJxJmM)                                                        |
| 30  |    泊岸#3466    |                                                        [Codepen](https://codepen.io/qoq77416416/pen/poQKqjO)                                                         |
| 31  |    ning_bobo    |                                                    [Codepen](https://codepen.io/ninghsu/pen/QWJxzpB?editors=1100)                                                    |
| 32  |    dong2328     | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/OJaErjzhttps://codepen.io/htamlkdz-the-encoder/pen/OJaErjzhttps://codepen.io/htamlkdz-the-encoder/pen/OJaErjz) |
| 33  |     hao2485     |                                                         [Codepen](https://codepen.io/Seanfeb16/pen/QWJxzaZ)                                                          |
| 34  | stevenchang421  |                                                          [Codepen](https://codepen.io/vwtrpqmm/pen/QWJxzOZ)                                                          |
| 35  |   cest_jessie   |                                                       [Codepen](https://codepen.io/itsjessiechen/pen/GRwGPXy)                                                        |
| 36  |      homer      |                                                          [Codepen](https://codepen.io/Buckhorn/pen/xxQzmBE)                                                          |
| 37  |       Uli       |                                                          [Codepen](https://codepen.io/uli1313/pen/ZEmRwEG)                                                           |
| 38  |    fanglin.y    |                                                        [Codepen](https://codepen.io/flynn841028/pen/wvQXNwR)                                                         |
| 39  |     Tina02      |                                                    [Codepen](https://codepen.io/chjitlox-the-bashful/pen/vYQrbEd)                                                    |
| 40  |     ovo.yun     |                                                      [Codepen](https://codepen.io/yun-the-scripter/pen/OJaEdVa)                                                      |
| 41  |      Eden       |                                                           [Codepen](https://codepen.io/iseden/pen/ExORrjN)                                                           |
| 42  |     Ting.66     |                                                    [Codepen](https://codepen.io/Ting66/pen/BaGVMov?editors=1100)                                                     |
| 43  |      舜仁       |                                                          [Codepen](https://codepen.io/randomno/pen/poQKGwj)                                                          |
| 44  |   .rainielin    |                                                        [Codepen](https://codepen.io/Yunchian-Lin/pen/gOQKqqN)                                                        |
| 45  |      Cura       |                                                    [Codepen](https://codepen.io/curalin/pen/abQKMWR?editors=1100)                                                    |
| 46  |     hebin.      |                                                       [codepen](https://codepen.io/landyhsiao776/pen/abQKMwR)                                                        |
| 47  |    adele6199    |                                               [Codepen](https://codepen.io/codepen-io-winnie/pen/LYXraya?editors=1100)                                               |
| 48  |    townyuan     |                                                          [Codepen](https://codepen.io/townyuan/pen/zYMaXqV)                                                          |
| 49  |      .dtou      |                                                    [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/JjeZVBK)                                                    |
| 50  |      ROGER      |                                                   [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/MWzXdWY)                                                    |
| 51  |      辣椒       |                                                        [Codepen](https://codepen.io/chilichen118/pen/rNQKbPa)                                                        |
| 52  |    ming0712     |                                                        [Codepen](https://codepen.io/StevenHuang/pen/vYQrwYd)                                                         |
| 53  |    jacky7035    |                                                          [Codepen](https://codepen.io/adens123/pen/abQKrww)                                                          |
| 54  |   shawey.1a2b   |                                                           [Codepen](https://codepen.io/Shawey/pen/JjeZqLM)                                                           |
| 55  |    Vic_Liou     |                                                       [Codepen](https://codepen.io/allenliou-java/pen/RwqJmmd)                                                       |
| 56  |    markchen_    |                                                        [Codepen](https://codepen.io/Mark-JJchen/pen/rNQKEwv)                                                         |
| 57  |     Amelia      |                                                        [Codepen](https://codepen.io/Amelia-chin/pen/zYMaVdL)                                                         |
| 58  |   .manmanlai    |                                                          [Codepen](https://codepen.io/kikiyang/pen/KKreOpe)                                                          |
| 59  |   yuling#1634   |                                                          [Codepen](https://codepen.io/igzdflpu/pen/oNQyKYb)                                                          |
| 60  |  yunhsinnnnnnn  |                                                         [Codepen](https://codepen.io/yun___hsin/pen/XWyYvVr)                                                         |
| 61  |     soniawu     |                                                           [Codepen](https://codepen.io/YUJOU/pen/YzRvmbr)                                                            |
| 62  |    Paul#7426    |                                                         [Codepen](https://codepen.io/paul-1997/pen/VwVBZKQ)                                                          |
| 63  |   Johnson3669   |                                                 [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/XWyBWZB)                                                  |
| 64  |    JohnChien    |                                                   [Codepen](https://codepen.io/glqwazid-the-selector/pen/mdQjyzq)                                                    |
| 65  |    yu.t_liu     |                                                         [Codepen](https://codepen.io/YuT200053/pen/JjeBYMw)                                                          |
| 66  |      rjjq       |                                                            [Codepen](https://codepen.io/rjjq/pen/JjeBRbj)                                                            |
| 67  |   hance__kao    |                                                   [Codepen](https://codepen.io/HanceKao/pen/WNYKGGz?editors=1100)                                                    |
| 68  |   murphy1665    |                                                           [Codepen](https://codepen.io/icephy/pen/rNQrMJE)                                                           |
| 69  |  ss30304#9213   |                                                          [Codepen](https://codepen.io/ss30304/pen/wvQxoMR)                                                           |
| 70  |  歐陽龍龍#1061  |                                                        [Codepen](https://codepen.io/dizzydog-rgb/pen/oNQMYGp)                                                        |
| 71  |      Randy      | [Codepen]() |
| 72  | MKL | [Codepen](https://codepen.io/Code-My/pen/yLQxYGz)|
| 73 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/VwVGeXa) |
| 74 | Long | [Codepen](https://codepen.io/Loonng/pen/jOQvNpN) |
| 75 | wind | [Codepen](https://codepen.io/wind7y/pen/XWyPdjb) |
| 76 | +7 | red、blue、white |
| 77 | Martin | [Codepen](https://codepen.io/markyourpage/pen/dyQqzaX) |
| 78 | Cosmos | [Codepen](https://codepen.io/violet7755/pen/JjevOOg) |
| 79 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR)|
| 80 | .icesam | [Codepen](https://codepen.io/icesam/pen/JjeaLRp)|
| 81 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/jOQvzyW) |
| 82 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/vYQzjox) |
| 83 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/RwqewMd) |
| 84 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/GRwYgLW) |
| 85 | EY | [Codepen](https://codepen.io/EY-chen/pen/PoxyPLo?editors=1100) |
| 86 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/gOQBMzN) |
| 87 | celia9182 | [Codepen](https://codepen.io/celia01/pen/LYXgOog)|
| 88 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/YzRjjXd) |
| 89 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/eYQQJLK) |
| 90 | yuchou#5749 | 1.紅色 2.藍色 3.白色 |
| 91 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/BaGGJaB)
| 92 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/LYXXrzp) |
| 93 | sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/ZEmmqJV) |
| 94 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/yLQQZww?editors=1100) |
| 95 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/PoxxLQx) |
| 96 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/MWzZwoP) |
| 97 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/bGQzVgj) |
| 98 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/xxQMJBR) |
| 99 | WA | [Codepen](https://codepen.io/ldddl/pen/GRweJOJ) |
| 100 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/abQMZLb) |
| 101 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/MWzRgJm) |
| 102 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/YzRMKMK) |
| 103 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/LYXvrwa) |
| 104 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/gOQVawN) |
|105|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/JjegeOv)|
|106|阿維#2569|[Codepen](https://codepen.io/gzzpwnbb-the-bold/pen/vYvBVZm)|
|107|ChrisSQR|[Codepen](https://codepen.io/ChrisSQR/pen/eYbRJwE)|
|108|楓|[Codepen](https://codepen.io/maplestartend/pen/WNmbGGW)|


- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```
