---
# System prepended metadata

title: "\U0001F3C5 Day 21"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 21

## CSS 權重覆蓋
> 口訣：先看權重再看先後

### 題目

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

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://codepen.io/kun8349/pen/xxWjpBZ)

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


回報區
---


|      Discord      |                                   CodePen / 答案                                    |
|:-----------------:|:-----------------------------------------------------------------------------------:|
|     薏慈#3795     |                 [CodePen](https://codepen.io/its_wang/pen/PoRBxvY)                |
|     Anna Liu#3794     |                 [CodePen](https://codepen.io/anna618/pen/vYReOVg)                  |
|     𝓛𝓊𝒸𝓎#8635     |                 [CodePen](https://codepen.io/lucygirl/pen/QWmKrvR)                  |
|     小白#2406     |                [CodePen](https://codepen.io/gracewhite/pen/OJvgOEK)                 |
|   CloThEs#7837    |                 [CodePen](https://codepen.io/CloThEsZ/pen/WNzEwNX)                  |
|    布魯諾#7239    |                 [CodePen](https://codepen.io/bruno-yu/pen/rNdzemb)                  |
|  Iris Huang#6727  |                  [CodePen](https://codepen.io/ythuang/pen/BardKRm)                  |
|   ajhappy#6488    |                [CodePen](https://codepen.io/ajhappy5438/pen/ZExJWyP)                |
|    黃士桓#7654    |              [codePen](https://codepen.io/shr-huan-huang/pen/NWYvNaM)               |
|   LinaChen#1796   |                 [codePen](https://codepen.io/LinaChen/pen/abYyNEz)                  |
|   Jenny真#7532    |                [CodePen](https://codepen.io/wei-chen-wu/pen/KKovzor)                |
|   Daisy_Li#4231   |            [CodePen](https://codepen.io/lidairong-gmail-com/pen/rNdzevX)            |
|  Karol-Kuo#5287   |                [codePen](https://codepen.io/ting-yu-kuo/pen/MWVvyXR)                |
|   WEI_RIO#9342    |            [CodePen](https://codepen.io/wei_wu/pen/qBoXZQN?editors=1000)            |
| bonnieli1414#4906 |         [CodePen](https://codepen.io/bonnieli1414/pen/GRxvZdM?editors=1100)         |
|      Ke#1391      |                 [Codepen](https://codepen.io/federerke/pen/ZExJWZz)                 |
|      YI#0863      |                  [Codepen](https://codepen.io/YI0305/pen/rNdzega)                   |
|   Amberhh#2465    |           [Codepen](https://codepen.io/Amberhh/pen/rNdzeEa?editors=1010)            |
|    JarDar#6980    |                 [codepen](https://codepen.io/jardarpen/pen/ZExyxKO)                 |
|     洋蔥#5295     |            [codepen](https://codepen.io/HSUNA/pen/MWVvyGR?editors=1000)             |
|  Potatolee#7749   |                [codepen](https://codepen.io/potatoleee/pen/zYWdBxq)                 |
|     大衛#4869     |           [codepen](https://codepen.io/exnsrpjc/pen/qBoXNEr?editors=1100)           |
|     QOO#8446      | 1.red 2.blue 3.white [codepen](https://codepen.io/QOOQOOQ/pen/ZExJOOG?editors=1100) |
|    Joyce#3790     |                [codepen](https://codepen.io/joycehuang/pen/WNzExwW)                 |
|     狸貓#5863     |                 [codepen](https://codepen.io/tanuki320/pen/oNqeLzG)                 |
|     威爾#1694     |                  [CodePen](https://codepen.io/WILL_Wu/pen/xxWLOEq)                  |
|    楓之聲#6945    |                 [CodePen](https://codepen.io/sshane258/pen/BardzWM)                 |
|    hungya#0773    |                 [CodePen](https://codepen.io/hungya777/pen/mdxMEOK)                 |
|     小諾#1866     |                  [CodePen](https://codepen.io/noichan/pen/XWEgbdv)                  |
|     Hsiu#8767     |                 [CodePen](https://codepen.io/amy-hsiu/pen/BardzrE)                  |
|    鉦勝 #8333     |                [CodePen](https://codepen.io/atckmax823/pen/abYyZKy)                 |
|     hua#9099      |                   [Codepen](https://codepen.io/LHua/pen/ZExJOop)                    |
|     zera#6060     |                [CodePen](https://codepen.io/zera-tseng/pen/zYWdBed)                 |
|     hua#9099      |                   [Codepen](https://codepen.io/LHua/pen/ZExJOop)                    |
|      peter#0      |          [Codepen](https://codepen.io/JIAN-RONG/pen/xxWLOeY?editors=1100)           |
|     int#7518      |                 [Codepen](https://codepen.io/intHuang/pen/xxWLERJ)                  |
| JingXuanLin#3371  |                 [Codepen](https://codepen.io/YouShuang/pen/GRxvqXz)                 |
|  Clara Cai#7097   |                [Codepen](https://codepen.io/Clara-Snowy/pen/mdxMrEZ)                |
|     威0#6919      |                [Codepen](https://codepen.io/n0918679182/pen/abYymya)                |
|  christina#6185   |                [Codepen](https://codepen.io/chrisc0210/pen/oNqezLQ)                 |
|  我是泇吟 #5189   |                 [Codepen](https://codepen.io/kljuqbxs/pen/mdxMrjJ)                  |
|    Vera #5592     |                           <!--1. red 2. blue 3. white -->                           |
|     Chi#7605      |                 [Codepen](https://codepen.io/YoChi84/pen/YzaxGdz)                   |
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/poLrNbZ)
|     suihsilan#9485 |                [Codepen](https://codepen.io/suihsilan/pen/poLrNwx)                   |
|    Fanglin#4054    |    [CodePen](https://codepen.io/flynn841028/pen/dymzOVX)    |
|    yuyu#6310    |    [CodePen](https://codepen.io/yuyu0905/pen/qBoXqob)    |
|    WEI#0797    |    [CodePen](https://codepen.io/wei-z/pen/gOexgOz)    |
|    Henry#7386    |    [CodePen](https://codepen.io/h1nr9/pen/oNqeBBG)|
| Barret#1119 |[CodePen](https://codepen.io/barret0720/pen/eYMEgdp)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/rNdzjJW)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/qBoXRxV)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/NWYvpdr)|
|Winnie Wu#5468|[Codepen](https://codepen.io/Pooh-Wu/pen/MWVvpLG?editors=1000)|
|鴨鴨#9822|[Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/zYWdwwV)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/LYdjLxj)|
| leeli#6423 |[Codepen](https://codepen.io/leelilee/pen/yLKoXwJ)|
| ssozr#4680 |[codepen](https://codepen.io/ssozr/pen/qBoXXXQ)|
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/oNqeGGb)|
|     YU #0618     |[CodePen](https://codepen.io/yoken_/pen/ExEvvBr)       |
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/gOexXrK)|
|Clara#1275|[Codepen](https://codepen.io/bsupixqu/pen/zYWdprp)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/WNzEdmO)|
 |yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/mdxMXeE)| 
|RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/LYdjgEw)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/BardqWd)|
|咻蹦#1526|[Codepen](https://codepen.io/emmasyu/pen/wvmqQBE?editors=1100)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/ExEvOdm)|
| PeggyLiao#1552|[CodePen](https://codepen.io/PeiJu-Liao/pen/WNzEYmN?editors=1100)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/MWVvZZQ)|
| LHchien33#6232 |[CodePen](https://codepen.io/lin_chien/pen/JjLyzKb)|
| Yuna Huang #2692 |1.red  2.blue  3.white|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/GRxvLVo)|
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/zYWdgbJ)|
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/jOzGNOG?editors=1100)|
|曼曼 #8356 |[CodePen](https://codepen.io/Vanyacheer/pen/qBoPEbY)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/oNqGBKq)|
| Jamie Wu#9345|[CodePen](https://codepen.io/Wu220103/pen/LYdzWwv)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/KKoXmgZ)|
| 連小艾#0791 |[Codepen](https://codepen.io/bolaslien/pen/WNzZOZm)|
| Melon #0380 |[Codepen](https://codepen.io/BalaFang/pen/JjLrOdG)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/XWEeZvv)|
|jin.huang#4666|[CodePen](https://codepen.io/haha1196/pen/mdxBjZG?editors=1100)|
| Jason1#2538 | [codepen](https://codepen.io/jotwxezb-the-encoder/pen/ZExXMPa) |
| Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/WNzZagM)|
| 阿蘇#8531 |1. red 2. blue 3. white|
| Shuo#1596 |[Codepen](https://codepen.io/chiangchungshuo/pen/PoROwLo)|
| kancheng#3915 |[Codepen](https://codepen.io/kancheng/pen/QWmOgjx)|
| Nini Chen#5790 |[Codepen](https://codepen.io/ninistyle/pen/xxWPXrm?editors=0100)|
|Deborah #0033 |[Codepen](https://codepen.io/deborah-tsai/pen/Barmxzb)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/NWYwLXK)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/BarmqNo)|
|Tuhacrt#0008 |1. red 2. blue 3. white|
|Carrie #2750 |1.red 2.blue 3.white|
|mei#8421 |[Codepen](https://codepen.io/Shila-Chen/pen/BarJaeO)|
|Cream#3449 |[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/oNqpjBb)|
|GARBO#6659 |[Codepen](https://codepen.io/garbo8130/pen/WNzdOPa)|
|aki|紅-藍-白|
|choubree#4350 |[Codepen](https://codepen.io/BreeChou/pen/BarJewN)|
|rueee#7997 |[Codepen](https://codepen.io/Jull-C/pen/yLKvbZz)|
|Cliff#4606 |[Codepen](https://codepen.io/Cliff_hex/pen/VwXQWgK?editors=1100)|
|Wei-Ting#7691|[Codepen](https://codepen.io/hellowei-ting/pen/GRxQyqy)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/QWmQeaY)
|Jumpye#8601|[Codepen](https://codepen.io/Jumpye/pen/JjLLLaq?editors=1000)
|鎔瑄#8578|紅藍白|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/abYKZEG)
|jeter#8014|[Codepen](https://codepen.io/gi-tai-she/pen/YzavqJL)
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/MWVvOKg)
|manson許#2295|[Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/VwXBVWx)
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/gOeQvga)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/YzaRMQv) 紅藍白|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/poLQmad)|
|瑞瑞 #4605|[CodePen](https://codepen.io/tsai-li-ting/pen/yLKGmGe)|
|郭芙蘭 #6374|[CodePen](https://codepen.io/flora_Kuo/pen/poLGvrz)|
|RuoAn #7124|Red / Blue / White|
