---
title: 【CSS】選擇器小遊戲 - CSS Diner
date: 2019-03-21
is_modified: false
disqus: cynthiahackmd
categories:
- "程式設計 › 程式語言與架構"
tags:
- "程式設計 › 程式語言與架構"
- "前端"
- "CSS/SCSS"
---

{%hackmd @CynthiaChuang/Github-Page-Theme %}

<br>

滿可愛的一個小遊戲 - [CSS Diner](http://flukeout.github.io/)，看它們在那邊抖阿抖還滿療癒的 XDDDD

<!--more-->

<p class="illustration">
<img src="https://i.imgur.com/lTIP6Rv.png" alt="CSS Diner">
CSS Diner 截圖 （圖片來源: <a href="http://flukeout.github.io/">CSS Diner 網站</a>）
</p>

<br>

遊戲非常簡單，就是使用正確的 CSS 選擇器，挑出正在抖動的元素 。

目前總共有 32 題，每題旁邊其實有講解，另外可以搭配 [mozilla 的教學文件](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors) 服用，應該還滿清楚的。

<br>

列一下我 32 題的回答：
1. plate
2. bento
3. #fancy
4. plate apple
5. #fancy pickle
6. .small
7. orange.small
8. bento orange.small
9. plate, bento
10. \*
11. plate *
12. plate + apple
13. bento ~ pickle
14. plate > apple
15. plate :first-child
16. plate :only-child
17. .small:last-child
18. :nth-child(3)
19. bento:nth-last-child(3) -> 挑倒數第三個的盒子
20. apple:first-of-type
21. plate:nth-of-type(2n) **or** plate:nth-of-type(even)
22. plate:nth-of-type(2n+3)
23. apple:only-of-type
24. .small:last-of-type
25. bento:empty
26. apple:not(.small)
27. [for]
28. plate[for]
29. bento[for=Vitaly] **or** [for=Vitaly]
30. [for^=Sa]
31. [for$=ato]
32. [for*=obb]

<br>

全部過關後會得到稱讚：**You rock at CSS!**

<p class="illustration">
<img src="https://i.imgur.com/nRZ1EAM.png" alt="CSS Diner破關截圖">
破關截圖 （圖片來源: <a href="http://flukeout.github.io/">CSS Diner 網站</a>）
</p>

<br><br>

> **本文作者**： 辛西亞．Cynthia
> **本文連結**： [辛西亞的技能樹](https://cynthiachuang.github.io/CSS-Diner) / [hackmd 版本](https://hackmd.io/@CynthiaChuang/CSS-Diner)
> **版權聲明**： 部落格中所有文章，均採用 [姓名標示-非商業性-相同方式分享 4.0 國際](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en) (CC BY-NC-SA 4.0) 許可協議。轉載請標明作者、連結與出處！