# 🏅 Day 11 - CSS 權重覆蓋

使用不同的選擇器選取同一個元素時，若設定相同樣式會出現樣式覆蓋狀況，此時會遵循 CSS 權重規則決定套用哪一個樣式，下方以優先順序高到低排列
1. !important：最高級，建議非必要情況少用，因為要想覆蓋它只能使用同樣的 !important，容易導致後續維護困難
2. 行內樣式（Inline Styles）：寫在標籤中的樣式，平常也不建議使用，因為這種寫法不好管理樣式，缺乏重用性
3. ID 選擇器：以 # 開頭的選擇器，一般用於 JS 相關設定，因權重過高也不適合用於撰寫樣式
4. class 選擇器：以 . 開頭的選擇器，是最常見用於設定樣式的選擇器
5. 元素選擇器：即 HTML 標籤本身，因標籤重複性高也不建議使用該選擇器來設定樣式

此外，假設是兩個相同選擇器的情況，會由後設定覆蓋前設定的順序來套用樣式。

> 口訣：先看權重，再看先後
> 若還不熟悉權重可以參考這篇[文章](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity#%E4%BC%98%E5%85%88%E7%BA%A7%E6%98%AF%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%E7%9A%84%EF%BC%9F)

### 題目

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

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 / 答案|
|:----:|:----:|:----:|
| 1 | 孟 |[Codepen](https://codepen.io/Mengru0503/pen/XJbQbMZ ) |
| 2 | Jenna |[Codepen](https://codepen.io/abiscc14/pen/azOxOyj) |
| 3 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/GgJLJQg) |
|4| Saika|[Codepen](https://codepen.io/saika4501/pen/YPXMXem) |
| 5 | Esther |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/MYwRwqQ) |
| 6 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/pvJBJQp) |
| 7 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/GgJLJYp) |
| 8 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/MYwRwQO)|
| 9 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/gbpypEM)|
| 10 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/XJbQmWo?editors=1100)|
| 11 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/qEdwORE) |
| 12 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/OPVGypj) |
| 13 | Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/yyNrYpG) |
| 14 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/PwqgPRO) |
| 15 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/NPqmGXM) |
| 16 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYGZWpJ) |
| 17 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/OPVGNxy) |
| 18 | pastor |[Codepen](https://codepen.io/peter_hung/pen/vEOMGEb) |
| 19 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/VYLNjev) |
| 20 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/jEPRrZv) |
| 21 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/ZYGZOxZ?editors=1100) |
| 22 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/NPqmrEB) |
| 23 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/yyNrJQw)) |
| 24 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/OPVGNmV) |
| 25 | Hao |[Codepen](https://codepen.io/abiscc14/pen/azOxOyj) |
| 26 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/PwqgGNB) |
| 27 | 燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/emNodWJ) |
| 28 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/OPVGNLK?editors=1100) |
| 29 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/WbvWoox) |
| 30 | Fang |[Codepen](https://codepen.io/Fang-the-encoder/pen/EajJNOd) |
| 31 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/LEVvxMZ) |
| 32 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/qEdwbRj) |
| 33 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/azOxJbN) |
| 34 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/MYwRpPe) |
| 35 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/ogXOWbP) |
| 36 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=bNdJWQg) |
| 37 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/GgJLEMW?editors=1100) |
| 38 | LouisaFish |[Codepen](https://codepen.io/Louisa-Fish/pen/raVbzOV?editors=1100) |
| 39 | Evelyn |[Codepen](https://cdpn.io/pen/debug/MYwRrGa?authentication_hash=bZMQWpZZDxbA) |
| 40 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/jEPRKYy) |
| 41 | 西娜|[Codepen](https://codepen.io/Sheena-the-encoder/pen/wBaZEME) |
| 42 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/myJgabB) |
| 43 | TY |[Codepen](https://codepen.io/Ted-Y/pen/MYwRxVz) |
| 44 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/yyNrrgm) |
| 45 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/gbpyJmN) |
| 46 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/JodVqyZ)
| 47 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/MYwRMMR)
| 48 | Peggy |[Codepen](https://codepen.io/Peggy_C/pen/YPXbKyJ) |
| 49 | suemma |[Codepen](https://codepen.io/suemma/pen/EajzjwQ)|
| 50 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/YPXbwKZ?editors=1100) |
| 50 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/xbGNOjv) |
| 51 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/OPVYRVQ) |
| 52 | Gloria |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/yyNWaEL?editors=1100) |
| 53 | Satar |[Codepen](https://codepen.io/SatarKuo/pen/NPqVRVZ) |
| 54 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/EajzNjX) |
| 55 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/VYLOmLd) |
| 56 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/EajzwPX) |
| 57 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/MYwdrRa) |
| 58 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/myJZBvg) |
| 59 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/myJZaQq) |
| 60 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/ogXKgJY) |
| 61 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/vEOoNxw) |
| 62 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/gbpVwOw) |
| 63 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/GgJVxWV) |
| 64 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/xbGBBdx) |
| 65 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/xbwbGRK) |
| 66 | 雅潔 |[Codepen](https://codepen.io/MOMOYA/pen/jEbPWrW) |
| 67 | B |[Codepen](https://codepen.io/Babel777/pen/EaVjWBe) |
| 68 | Fancy |[Codepen](https://codepen.io/Fancy-the-lessful/pen/VYvvzrB?editors=1100) |
| 69 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/myeeMRz) |
| 70 | water | [Codepen](https://codepen.io/wateruby/pen/LEppXyG)|
| 71 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/dPYGvrK) |
| 72 | Lucy |[Codepen](https://codepen.io/Lucytrycode/pen/qEOZqVy) |
|73| 小趴| [Codepen](https://codepen.io/papa2415/pen/zxvqwwE)|
| 74 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/JoYXNBa) |
| 75 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/vENGdQw?editors=1100) |
| 76 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/PwPGrvN?editors=1000) |
| 77 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/LEpbjZK) |
| 78 | cindy |[Codepen](https://codepen.io/a50134/pen/NPGbVOo) |
| 79 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/empgwxW?editors=1100)|
| 80 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/YPyrWRG) |
| 81 | Mini |[Codepen](https://codepen.io/miiinii32-Cheng/pen/OPyQKBm) |
| 82 | 4ping | [Codepen](https://codepen.io/928Libra/pen/raOKNEj)
| 83 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/qEOJGLJ) |
| 84 | Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ZYbVZMZ?editors=1100) |
| 85 | PAgaNiNi |[Codepen](https://codepen.io/PA-OTTER/pen/bNVJJQB?editors=1100)|
| 86 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/raxewMa?editors=1100)|

<!-- 快速複製 -->
<!-- | 排序 | 姓名 |[Codepen](連結) | -->