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

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

### 題目

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

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

HTML

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

CSS

    p {
      color: white;
    }

    .black {
      color: black;
    }

    .blue {
      color: blue;
    }

    .red {
      color: red;
    }

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

HTML

    <p class="a p">這是藍色ㄉ文字</p>

CSS

    p {
      color: white;
    }

    .p {
      color: blue;
    }

    a {
      color: red;
    }

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

HTML

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

CSS

    .p {
      color: blue;
    }

    .blue {
      color: red;
    }

    p.blue {
      color: green;
    }

    #blue {
      color: white;
    }

## 回報流程

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


<!-- 解答：
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|