---
# System prepended metadata

title: "\U0001F3C5 Day 3 - CSS 選擇器運用"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 3 - CSS 選擇器運用

### 類別選擇器
在 HTML 標籤命名 class（一個 HTML 標籤可以有多個 class），
並在 CSS 中運用 `.` 來設定樣式。像是：
```htmlembedded=
<p class="text">類別選擇器</p>
```
```css=
.text {
    color: #ffffff;
}
```

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

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

### 題目
請運用類別選擇器，將下方標籤呈現出如圖中的樣式，
![](https://i.imgur.com/jhNfYFe.png)

並嘗試自行運用 hover、active、focus 來改變樣式。
```htmlembedded=
<a href="#" class=""> CSS 選擇器運用 </a>
```




## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

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