【CSS】選擇器小遊戲 - CSS Diner

| | |

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

CSS Diner 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破關截圖 破關截圖 （圖片來源: CSS Diner 網站）