滿可愛的一個小遊戲 - CSS Diner，看它們在那邊抖阿抖還滿療癒的 XDDDD

CSS Diner 截圖 （圖片來源: CSS Diner 網站）

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

目前總共有 32 題，每題旁邊其實有講解，另外可以搭配 mozilla 的教學文件 服用，應該還滿清楚的。

列一下我 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]

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

破關截圖 （圖片來源: CSS Diner 網站）

本文作者： 辛西亞．Cynthia
本文連結： 辛西亞的技能樹 / hackmd 版本
版權聲明： 部落格中所有文章，均採用 姓名標示-非商業性-相同方式分享 4.0 國際 (CC BY-NC-SA 4.0) 許可協議。轉載請標明作者、連結與出處！