# 🏅 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 / 答案 |
|:---:|:---------------:|:-------------------------------------------------------------------------:|
| 1 | 禹成林 |[Codepen](https://codepen.io/hexschool/pen/yLvrmGz) |
| 2 | Esther |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/JodaXzM)|
| 3 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/OPVoXVL)|
| 4 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/gbpjZYL) |
| 5 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/pvJObJN) |
| 6 | Jenna |[Codepen](https://codepen.io/abiscc14/pen/wBaEWMB) |
| 7 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/ByNOzwj) |
| 8 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/ZYGMOxv) |
| 9 | 冠翔 |[Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/NPqLRRw) |
| 10 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/JodaRKg) |
| 11 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/zxGJKwQ) |
| 12 | pastor |[Codepen](https://codepen.io/peter_hung/pen/VYLGKyj) |
| 13 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/QwbVKmB) |
| 14 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/dPoqOaK) |
| 15 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/yyNxgyV) |
| 16 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/JodaEwx) |
| 17 | suemma |[Codepen]([連結](https://codepen.io/suemma/pen/QwbVpmB)) |
| 18 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/GgJXmpx) |
| 19 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/qEdMRVQ?editors=1100) |
| 20 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/pvJOPOj) |
| 21 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/MYwqmze) |
| 22 | Hao |[Codepen](https://codepen.io/Howell/pen/JodaJJa) |
| 23 | cks4060 |[Codepen]([連結](https://codepen.io/CKS40660/pen/OPVojPW)) |
| 24 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/xbGaLzb) |
| 25 | zhe |[Codepen](https://codepen.io/dotheright/pen/KwpxvOE) |
| 26 | Forma |[Codepen](https://codepen.io/2085-XD/pen/PwqdKVE) |
|27| Saika|[Codepen](https://codepen.io/saika4501/pen/emNLGBN)|
|28| PK|[Codepen](https://codepen.io/Percy-Ku/pen/gbpdGGd)|
| 29 | LouisaFish |[Codepen](https://codepen.io/Louisa-Fish/pen/PwqdJaX?editors=1100) |
| 30 | Kiku |[Codepen](https://codepen.io/Li-Kusa/pen/qEdMPZR) |
| 31 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/GgJXOjb) |
| 32 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/full/dPoqZZa) |
| 33 | cbs9007 |[CodePen](https://codepen.io/wasdjk/pen/emNLeee)|
| 34 | Celia |[CodePen](https://codepen.io/Cindy-Ho/pen/yyNqWLm)|
| 35 | ahga |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/XJbPZdm) |
| 36 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/MYwqQrw) |
| 37 | Zhi |[Codepen](https://codepen.io/aneeiitk-the-typescripter/pen/WbvgMXB) |
| 38 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/qEdMXOe) |
| 39 | Mumu |[Codepen](https://codepen.io/ztz_mu/pen/VYLGQXQ) |
| 40 | Ken |[Codepen](https://codepen.io/softpmdm-the-flexboxer/pen/XJbPZVK) |
| 41 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/RNPYQYB) |
| 42 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/LEVJmxY) |
| 43 | TY |[Codepen](https://codepen.io/Ted-Y/pen/myJGLwO) |
| 44 | Poppy |[Codepen](https://codepen.io/Poppy-the-scripter/pen/bNdxQOw) |
| 45 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/NPqLode?editors=1100) |
| 46 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/gbpdZqG) |
| 47 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/ByNObro?editors=1100) |
| 48 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/ogXPRZW) |
| 49 | 社子畢卡索(Lu) |[Codepen](https://codepen.io/pen?template=jEPpejr) |
| 50 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ZYGqEGB) |
| 51 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/NPqOWdq) |
| 52 | Space key |[Codepen](https://codepen.io/uuajlwse-the-selector/pen/vEOVxJN) |
| 53 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/zxGmOBG) |
| 54 | Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/YPXJYmp)
| 55 | Huang Eagle | [Codepen](https://codepen.io/YuCi/pen/XJbxExV)
| 56 | Tree | [Codepen](https://codepen.io/andrew781026/pen/xbGyape)
| 57 | Hana Chou | [Codepen](https://codepen.io/CHOU-HANA/pen/ByNqqaJ)
| 58 | Yanchen16 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/MYwPZJV) |
| 59 | Satar |[Codepen](https://codepen.io/SatarKuo/pen/pvJQJJx) |
| 60 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/PwqxqPK) |
| 61 | star |[Codepen](https://codepen.io/Hsin-Wu/pen/bNdQeKG)|
| 62 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/ByNGLJQ)|
| 63 | Peggy |[Codepen](https://codepen.io/Peggy_C/pen/pvJQxbO) |
| 64 | NellyGuo |[Codepen](https://codepen.io/iizqdzgh-the-scripter/pen/gbpQExQ) |
| 65 | 立花 |[Codepen](https://codepen.io/kj25940858/pen/xbGmbXy) |
| 66 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/QwbzdPb?editors=1100) |
| 67 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/ZYGVqXm) |
| 68 | 孟 |[Codepen]([連結](https://codepen.io/Mengru0503/pen/LEVMXGx)) |
| 69 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/bNdOPem) |
| 70 | Yan* |[Codepen]([連結](https://codepen.io/Yan-L/pen/EajrYjO)) |
| 71 | Michelle |[Codepen]([連結](https://codepen.io/bastar_dize/pen/bNdzvjO)) |
| 72 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/yyNZNgj) |
| 73 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/MYwxaQM?editors=1100)|
| 74 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/JodzGXy) |
| 75 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/vEObjev?editors=1100) |
| 76 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/JodzWYJ) |
| 77 | Fang |[Codepen](https://codepen.io/Fang-the-encoder/pen/jEPJBXr) |
| 78 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/wBaOdZq) |
| 79 | 加菲 |[Codepen](https://codepen.io/DOU-CF/pen/QwboOaZ) |
| 80 | Alyssa |[Codepen](https://codepen.io/AlyssaYen/pen/LEVaQLa) |
| 81 | teresa |[Codepen](https://codepen.io/teresa150029/pen/ZYGPmxN) |
| 82 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/ByNEyaO) |
| 83 | Phyllida_17 |[Codepen](https://codepen.io/Phyllida-Yeh/pen/pvJQKQB?editors=1100) |
| 84 | Zong |[Codepen](https://codepen.io/BAY71/pen/raVbyOV) |
| 85 | 中年危機 |[Codepen](https://codepen.io/Weiwei2025/pen/myJgWBj) |
| 86 | Rogan |[Codepen](https://codepen.io/hexschool/pen/yLvrmGz) |
| 87 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/zxGXwvP) |
| 88 | World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/YPXMYEe) |
| 89 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/vEOMaxG) |
| 90 | 俐涵 |[Codepen](https://codepen.io/WLH1999/pen/gbpyJWV) |
| 91 | 李大維 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/gbpyNgL) |
| 92 | Stanley |[Codepen](https://codepen.io/Stanley-Chang-the-flexboxer/pen/azOxexw) |
| 93 | Hsun|[Codepen](https://codepen.io/tsxdpjfh-the-animator/pen/dPoEzdz) |
| 94 | Antonio|[Codepen](https://codepen.io/gwhvusel-the-builder/pen/YPXbapz) |
| 95 | QoQ|[Codepen](https://codepen.io/fabusolq-the-styleful/pen/EajzMKe) |
| 96 | york08283|[Codepen](https://codepen.io/York-Chou/pen/raVEzvN) |
| 97 | PAgaNiNi|[Codepen](https://codepen.io/PA-OTTER/pen/VYLJXxZ) |
| 98 | 平平|[Codepen](https://codepen.io/ypinpin/pen/ZYGgGvW) |
| 99 | Bry |[Codepen](https://codepen.io/weichengliao220/pen/raVXMvE) |
| 100 | vivian |[Codepen](https://codepen.io/vivian100/pen/ByNbePL) |
| 101 | Mini |[Codepen](https://codepen.io/miiinii32-Cheng/pen/azvoayM) |
| 102 | Bee |[Codepen](https://codepen.io/Bee-Lu/pen/vENBMJO) |
| 103 | Ching | [Codepen](https://codepen.io/huangching/pen/WbQeqMQ) |
| 104 | B | [Codepen](https://codepen.io/Babel777/pen/jEbORGm) |
| 105 | Sam | [Codepen](https://codepen.io/lee-wei-hong/pen/VYvYzJw) |
| 106 | Fancy | [Codepen](https://codepen.io/Fancy-the-lessful/pen/pvjvMPN)
| 107 | 雅潔 | [Codepen](https://codepen.io/MOMOYA/pen/yyYNNjR)
| 108 | Lika | [Codepen](https://codepen.io/wlyvctff-the-solid/pen/LEpVQBE)
| 109 | cindy | [Codepen](https://codepen.io/a50134/pen/empNKaX)|
| 110 | water | [Codepen](https://codepen.io/wateruby/pen/PwPqXKv)|
| 111 | Hsin | [Codepen](https://codepen.io/Anny-Chang/pen/Qwjjvdv?editors=1100) |
| 112 | Lucy | [Codepen](https://codepen.io/Lucytrycode/pen/MYaamNP) |
| 113 | cheryl | [Codepen](https://codepen.io/katrina-the-decoder/pen/LEpGdBG) |
|114|小趴|[Codepen](https://codepen.io/papa2415/pen/LEVggzb)|
| 115 | Va | [Codepen](https://codepen.io/lichenValin/pen/jEbMZOJ)|
| 116 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/RNWGQeY)|
| 117 | Midy Wu | [Codepen](https://codepen.io/work-wu/pen/azvBYEq)|
| 118 | maerc | [Codepen](https://codepen.io/Lu-Liangyu/pen/JoYEWEw)|
| 119 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/ZYbLZBa?editors=1100)|
| 120 | Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/PwPmPgV)|
| 121 | ryan_lan | [Codepen](https://codepen.io/Ryan-Lan/pen/dPYZbvK)|
| 122 | Sam | [Codepen](https://codepen.io/lee-wei-hong/pen/NPGyKzV)|
| 123 | 4ping | [Codepen](https://codepen.io/928Libra/pen/NPGMGNJ)|
| 124 | 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/raOodRr)|
| 125 | YIN | [Codepen](https://codepen.io/wxnnzjvr-the-animator/pen/RNRxrog?editors=1100)|