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

## CSS 選擇器運用

### 類別選擇器
在 HTML 標籤命名 class（一個 HTML 標籤可以有多個 class），
並在 CSS 中運用 `.` 來設定樣式。像是：

<p class="text">類別選擇器</p>

.text {
    color: #ffffff;
}

### 擬態選擇器
- **:hover** : 滑鼠滑過時的樣式
- **:active** : 滑鼠按下的樣式
- **:focus** : 聚焦時的樣式

通常運用在連結、按鈕、表單輸入，可以增加使用者體驗

### 題目
請運用類別選擇器，將下方標籤呈現出如圖中的樣式，

並嘗試自行運用 hover、active、focus 來改變樣式。

<a href="#" class=""> CSS 選擇器運用 </a>

## 回報流程

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


<!-- 解答：https://codepen.io/hexschool/pen/yLvrmGz -->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| 小鐵#2814 | [Codepen](https://codepen.io/xiron/pen/JjLKZNw)
| 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/zYWYWrj) |
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/WNzNzjp) |
| 黃士桓#7654 | [CodePen](https://codepen.io/shr-huan-huang/pen/JjLjLGm) |
Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/poLoLrW) |
| Kiwi#9804 | [CodePen](https://codepen.io/kiwi1113/pen/oNqNqwO) |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/zYWYWEJ) |
| 大衛#4869 | [Codepen](https://codepen.io/exnsrpjc/pen/PoRoRON) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/poLoLPW) |
| Chaoci#2460 | [CodePen](https://codepen.io/gmailchao/pen/vYRYRdE) |
| RayChen#6088 | [CodePen](https://codepen.io/raychen1996/pen/JjLjLvV) |
| NeilLin#3009 | [CodePen](https://codepen.io/a0071421/pen/ExExERG) |
| 洋蔥#5295 | [CodePen](https://codepen.io/HSUNA/pen/rNdNdvZ) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/JjLjLmq) |
| Ron Liang#7277 | [CodePen](https://codepen.io/ron-go/pen/WNzNzWX) |
| Rita916#4384 | [CodePen](https://codepen.io/rita0916/pen/yLKLKWq) |
| Karol-Kuo#5287 | [Codepen](https://codepen.io/ting-yu-kuo/pen/VwXwxZe) |
| Ke#1391 | [CodePen](https://codepen.io/federerke/pen/vYRYjYK) |
| Amberhh#2465 | [CodePen](https://codepen.io/Amberhh/pen/jOzOxyv?editors=1100) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/OJvJZRx) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/gOeOzPW) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/rNdNvjg) |
| 狸貓#5863 | [CodePen](https://codepen.io/tanuki320/pen/yLKLjgG) |
| 紙飛機#1335 | [CodePen](https://codepen.io/paperplanea/pen/abYbGLO) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/rNdNvLb) |
| choubree#4350 | [CodePen](https://codepen.io/BreeChou/pen/zYWYjdO?editors=1100) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/QWmWrQJ?editors=1100) |
| 群嘉#3943 | [CodePne](https://codepen.io/efzdamnp-the-lessful/pen/KKoKRGY) |
| 楓之聲#6945 | [CodePen](https://codepen.io/sshane258/pen/RwMwyvx) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/ExExLrK) |
| Cliff#4606 | [CodePen](https://codepen.io/Cliff_hex/pen/OJvJZYo) |
| Fanglin#4054 | [Codepen](https://codepen.io/flynn841028/pen/ExExLOP) |
| Winnie Wu#5468 | [Codepen](https://codepen.io/Pooh-Wu/pen/Baraxgq) |
| WEI_RIO#9342 | [Codepen](https://codepen.io/wei_wu/pen/WNzNywq?editors=1100) |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/BaraVRE) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/eYMYKEd?editors=1100) |
| 威0#6919 | [Codepen](https://codepen.io/n0918679182/pen/xxWxjBE) |
| Jamie Wu#9345 | [Codepen](https://codepen.io/Wu220103/pen/zYWYaoN) |
| Sin#0040 | [Codepen](https://codepen.io/sophmfyt-the-sasster/pen/gOeOKjy) |
| zera#6060 | [Codepen](https://codepen.io/zera-tseng/pen/jOzOKor) |
| How#5806 | [Codepen](https://codepen.io/howtobefine/pen/gOeOjaO) |
| Kyle, Chuang#1892 |[CodePen](https://codepen.io/hohayo/pen/LYdYBWq) | |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/XWEWBMq) |
| 逸川#6319 | [CodePen](/N3uRdxHySMWRBiOhbJ1ARgio/bryanlin8911/pen/MWVWBQV)|
| 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/yLKLqmq)|
| Van.CS #2067 | [CodePen](https://codepen.io/fbacojji-the-selector/pen/oNqNMON)|
| Henry#7386 | [CodePen](https://codepen.io/h1nr9/pen/gOeOjNg)|
| suihsilan#9485| [CodePen](https://codepen.io/suihsilan/pen/dymyqYG)|
| Yu An #1572 | [CodePen](https://codepen.io/yuan0401/pen/eYMYLEa?editors=1100)|
| 鉦勝 #8333 | [CodePen](https://codepen.io/atckmax823/pen/LYdYJmR)|
| mickey#8745 | [CodePen](https://codepen.io/weizhetseng/pen/MWVWqXM)|
| SASIMI#5099 | [CodePen](https://codepen.io/sashimi1327/pen/QWmWVaZ)|
| 瑞瑞#4605 | [CodePen](https://codepen.io/tsai-li-ting/pen/abYbROB?editors=1100)|
| LINK#1933 | [CodePen](https://codepen.io/miyayoe/pen/GRxRXbd)|
|Grass立花#8094|[CodePen](https://codepen.io/kj25940858/pen/GRxRXVd)
|鴨鴨#9822|[CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/MWVWPew)|
|JarDar #6980|[CodePen](https://codepen.io/jardarpen/pen/MWVWPzJ)|
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/eYMYPbW) |
|Cream #3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/xxWxyJp)|
| Barret#1119 | [CodePen](https://codepen.io/barret0720/pen/abYbRVy) |
| hsiu#8767 | [CodePen](https://codepen.io/amy-hsiao-the-scripter/pen/YzazJBR) |
| Melon#0380 | [CodePen](https://codepen.io/BalaFang/pen/qBoBJjV) |
| 小諾#1688 | [CodePen](https://codepen.io/noichan/pen/mdxdQMy) |
| Mylène#2481 | [CodePen](https://codepen.io/hamajibashi/pen/vYRYQJB) |
| 得源#8355 | [CodePen](https://codepen.io/aglgvsie/pen/mdxdQLe)|
| Yunei#6323 | [CodePen](https://codepen.io/Yunei/pen/NWYWLWX)|
| ssozr#4680 | [CodePen](https://codepen.io/ssozr/pen/abYbPmo) | |
| Chi #7605 | [CodePen](https://codepen.io/YoChi84/pen/wvmvRWP)|
|Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/vYRYvVJ) |
|Ming Juan #0071 | [CodePen](https://codepen.io/M-Juan/pen/bGvGzRy) |
|GARBO#6659 | [CodePen](https://codepen.io/garbo8130/pen/wvmvNzO) |
|Susie(軒)#6181 | [CodePen](https://codepen.io/Codeleaf/pen/yLKLwLM) |
|StellaHsu#2687 | [CodePen](https://codepen.io/stella950114/pen/zYWYeVP) |
|心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/eYMYXze) |
|Gloria#1328| [CodePen](https://codepen.io/akeymaker/pen/MWVWxao)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/yLKLwMo) |
|jin.huang#4666 | [CodePen](https://codepen.io/ruby828387/pen/gOeOEjr) |
|艾草 #4830 | [CodePen](https://codepen.io/jmkhsutp/pen/qBoBvov) |
Erwin#9851|[CodePen](https://codepen.io/jmkhsutp/pen/qBoBvov) |
| yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/mdxdoLJ)|
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/qBoBvPg) |
| Tuhacrt #0008 | [CodePen](https://codepen.io/Tuhacrt/pen/MWVWRGd) |
| Joyce#3790 | [CodePen](https://codepen.io/joycehuang/pen/KKoKYob?editors=1100) |
| 浪裡小白龍#6860| [CodePen](https://codepen.io/Emillo/pen/NWYWmVe) |
|YunaHuang #2692| [CodePen](https://codepen.io/Yuna1002/pen/qBoBwQa) |
|曼曼#8356|[Codepen](https://codepen.io/Vanyacheer/pen/poLoBLG)|
|Nini Chen #5790|[Codepen](https://codepen.io/ninistyle/pen/eYMYoam)|
|鑫鑫#4346|[Codepen](https://codepen.io/Neil1024/pen/MWVWdWW)|
|smallmi80#3735|[Codepen](https://codepen.io/smallmimi80/pen/oNqNRNw)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/gOeOJOK)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/GRxRLVx)|
| Yuan962#5897 | [Codepan](https://codepen.io/Jasmine-Liao/pen/qBoBzOM) |
| Pony#6778| [Codepan](https://codepen.io/Pony0303/pen/yLKLdvP) |
| 咻蹦#1526| [Codepan](https://codepen.io/emmasyu/pen/OJvJezN) |
| peter.chen | [Codepan](https://codepen.io/JIAN-RONG/pen/ZExEdrx?editors=1100) |
| 肉魚#2149 | [Codepan](https://codepen.io/zoechen13/pen/vYRYoLK) |
|Shuo#1596 | [Codepan](https://codepen.io/chiangchungshuo/pen/RwMwXaG)|
|阿基基#2557 | [Codepan](https://codepen.io/JIJI_GNI/pen/YzazmGW)|
|Sentiments#4883 | [Codepen](https://codepen.io/Sentiments/pen/VwXwove)
|Shalina123#3090 | [Codepen](https://codepen.io/shalina123/pen/GRxRVdM)
|Mimino #9154 | [CodePen](https://codepen.io/mimino-tsai/pen/XWEJryg)
|rueee #7997 | [CodePen](https://codepen.io/Jull-C/pen/xxWbGWL)
|Steve#9699 | [CodePen](https://codepen.io/ycsteve/pen/BaryjXP)
| 肯肯#1576 | [Codepan](https://codepen.io/kkwcan/pen/JjLoXQL) |
|pidde#7315| [CodePen](https://codepen.io/pidderliao/pen/rNdaeXw)|
|44#6963| [CodePen](https://codepen.io/lin-b/pen/gOebMLY)|
|AhChiaZoe#8535|[CodePen](https://codepen.io/ZoeTeng/pen/oNqgxMq?editors=1100)|
|WH#5697|[CodePen](https://codepen.io/Wenhsin-hu/pen/jOzErKw?editors=1100)|
|Andy Hung#3335|[CodePen](https://codepen.io/andyhung0723/pen/abYzmEb)|
| 鎔瑄 #8578 | [CodePen](https://codepen.io/barbarayou/pen/PoRwGWj) |
| TsaiMinChun #8285 | [CodePen](https://codepen.io/Tsai0926/pen/RwMNobj) |
| Chun #7802 | [CodePen](https://codepen.io/zpsamglw-the-bold/pen/yLKyVaL) |
| 阿蘇 #8531 | [CodePen](https://codepen.io/susu8327/pen/abYzpZG) |
| kai #1098 | [CodePen](https://codepen.io/ahkai/pen/gOebmRW) |
| Tokyoyo #509 | [CodePen](https://codepen.io/tokyoyo/pen/LYdELOM) |
| siZunyo#3185 | [CodePen](https://codepen.io/yi-lun-jhuang/pen/RwMNZoG) |
| Arista | [CodePen](https://codepen.io/arista-hsieh/pen/ExEavEY) |
| GL#2256 | [CodePen](https://codepen.io/4genie/pen/OJvPjdv) |
| Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/bGvNoGm) |
| CJ07 #0176 |[CodePen](https://codepen.io/cjtseng07/pen/ZExYXjO?editors=1100)|
| Halla#0431 | [Codepen](https://codepen.io/wawykddh-the-typescripter/pen/mdxyMgB) |
| Vian #7338 |[CodePen](https://codepen.io/vianwu31/pen/MWVYOpo)|
| Randy #0393 |[CodePen](https://codepen.io/randy820113/pen/WNzbXXo)|
| LinaChen #1796 |[CodePen](https://codepen.io/LinaChen/pen/abYzVyK)|
| IreneY #0086 |[CodePen](https://codepen.io/HalfPlannedJourney/pen/LYdEOeM)|
| Ringo #7583 |[CodePen](https://codepen.io/ringolai1988/pen/xxWbpwN)|
| 艾芮絲#6060 |[CodePen](https://codepen.io/wangyingju/pen/vYREdOe)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/gOebePN)|
|阿武#9488|[CodePen](https://codepen.io/samwnkyat/pen/abYzaoX)|
|christina#6185|[CodePen](https://codepen.io/chrisc0210/pen/eYMmbVX)|
|Clara Cai#7097|[CodePen](https://codepen.io/Clara-Snowy/pen/OJvPqJe)|
|Jeff Lin #4717|[CodePen](https://codepen.io/toqzvyeq-the-scripter/pen/KKowEgg)|
|Fang #4680|[CodePen](https://codepen.io/std95174/pen/vYREPzo)|
|yen #5757|[CodePen](https://codepen.io/TZU-HUANG-YEN/pen/VwXYREO)|
hansonpohan#7853|[CodePen](https://codepen.io/hansonpohan/pen/PoRwrGM)|
|bakiii #2652|[CodePen](https://codepen.io/aki168/pen/BarNBoV)|
|color #4378|[Codepen](https://codepen.io/color0602/pen/XWEbWGY?editors=1100)||
|KJ T.#8381|[Codepen](https://codepen.io/leontsai218/pen/RwMPopj)||
|mei #8421|[Codepen](https://codepen.io/Shila-Chen/pen/GRxJNVw)||
|肉桂卷#0625|[Codepen](https://codepen.io/ginnlee/pen/xxWGLMx)||
|Jie Du #4493|[Codepen](https://codepen.io/qgqonost-the-flexboxer/pen/KKopoVd?editors=1100)||
| Chi_Chen#3755 | [CodePen](https://codepen.io/akichen27/pen/qBodooy) | |
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/LYdVdXX)||
|jason so#3921|[Codepen](https://codepen.io/jasonso/pen/OJvVrNX)||
|bonnieli1414#4906|[Codepen](https://codepen.io/bonnieli1414/pen/NWYqoRB?editors=1001)||
|skypassion5000#4151|[Codepen](https://codepen.io/skypassion5000/pen/gOepVLP)||
|Cola#1583|[Codepen](https://codepen.io/Cola865/pen/OJvyVxZ)||
|Aritan#1931|[Codepen](https://codepen.io/Aritan/pen/abYvdjx)||
|Manson許#2295|[CodePen](https://codepen.io/oupbzfxq-the-scripter/pen/GRxpZbB)||
|Jean Hung#7151|[CodePen](https://codepen.io/jean8602/pen/YzayWdB)||
|MOMO#3370|[CodePen](https://codepen.io/chiuyuchun/pen/ExEVNMy)||
|Leo Song #8278|[Codepen](https://codepen.io/sunnylaba/pen/QWmjOZy)||
|Emily Hsi #9066|[Codepen](https://codepen.io/EmilyHsi/pen/oNqjpbm)||
|Scottie #3850|[Codepen](https://codepen.io/wow767t/pen/BaroJqW)||
|pudding#2006|[Codepen](https://codepen.io/yushujhen/pen/xxWwzoR)||
|家洋#6999|[Codepen](https://codepen.io/yang940648/pen/bGvVmBL)||
|Jase#1996|[Codepen](https://codepen.io/yvfxyvms/pen/vYRNQWz)||
|吉米阿民#8049|[Codepen](https://codepen.io/yinminlin/pen/rNdxarr)||
|Daisy_Li#4231|[Codepen](https://codepen.io/lidairong-gmail-com/pen/zYWrGYb)|
|Han Lai|[Codepen](https://codepen.io/x94han/pen/XWEXbro?editors=1100)|
|Jenny真#7532|[CodePen](https://codepen.io/wei-chen-wu/pen/poLgjWJ?editors=1100)||
|ROKA#4051|[Codepen](https://codepen.io/chengchiaoyi/pen/OJvMNdZ?editors=1100)||
|iSunny|[Codepen](https://codepen.io/vwgfdkzu-the-encoder/pen/OJvMbrv)||
|Carrie#2750|[Codepen](https://codepen.io/carrie-wang/pen/MWVKmwB)||
|zaii#7472|[Codepen](https://codepen.io/ivy2846357/pen/zYWrLqr)||
| Jo Yun #8899 | [Codepen](https://codepen.io/Jo_Yun/pen/qBobMZK)
| Kevin#6131 | [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/qBobJzN)
| RuoAn#7124 | [Codepen](https://codepen.io/LiauRuoAn/pen/BarjGZG)
| RuoAn#7124 | [Codepen](https://codepen.io/LiauRuoAn/pen/BarjGZG)
| Suyan#7529 | [Codepen](https://codepen.io/suyan_echo/pen/poLgYjm)
| jeter#8014 | [Codepen](https://codepen.io/gi-tai-she/pen/OJvNRZP?editors=1100)
| wlc#4877 | [Codepen](https://codepen.io/arxmyifs/pen/gOerdzV)
| 薏慈#3795 | [Codepen](https://codepen.io/its_wang/pen/ExEKroM)
|小許 #9885 | [Codepen](https://codepen.io/xu75/pen/yLKJXxd)
|YaWen #2752 | [Codepen](https://codepen.io/yuwendy/pen/OJvXgWz)
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/dympPNJ)|
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/YzaGYjv)
|yuchenye #6119|[CodePen](https://codepen.io/yuchen/pen/XWEjOLP)
|kancheng #3915|[CodePen](https://codepen.io/kancheng/pen/QWmGWmr)
|iamYanYan#9422|[CodePen](https://codepen.io/yayayanns/pen/WNzoQpX)
|sophiee#7015|[CodePen](https://codepen.io/sophiee2727/pen/Yzapyrw)
|Dingy#2931|[CodePen](https://codepen.io/dingy-xiao/pen/VwXmvoP?editors=1100)
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/RwMoagO)
|Nathan James#8120|[CodePen](https://codepen.io/ufo060204/pen/ZExBLYo)
|toshow#5609|[Codepen](https://codepen.io/toshow/pen/vYRgOZV)
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/JjLEMRd)
|EmilyLin#0526|[Codepen](https://codepen.io/c199615/pen/PoRWLjP)
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/JjLNvaP)
|yuling#1634|[Codepen](https://codepen.io/igzdflpu/pen/VwXbgEr)
|wico#9054|[Github Page](https://wicowen.github.io/web-playground-gulp/daily-task/day3.html)
|KarenChan#4625|[CodePen](https://codepen.io/ruruchan7/pen/OJvjxVp)
|鄭小蛙#3528|[CodePen](https://codepen.io/libclf/pen/abYLMJd)
|Rena#6249 |[CodePen](https://codepen.io/aureate0116/pen/zYWpGvR)
Jumpye#8601 |[CodePen](https://codepen.io/Jumpye/pen/VwXyxBx)
|lulu醬#2861|[CodePen](https://codepen.io/lulu0314/pen/KKoZjMo)
|HSINYU#1182|[CodePen](https://codepen.io/hsinfish/pen/ZExqdqG)
|DoraHunag#8223|[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/gOeqKYZ)
|Velma#1693|[CodePen](https://codepen.io/Ze1225/pen/vYjgBog)