CSS Diner – 边学CSS选择器,边享受晚餐

今天我们将介绍一个用来学习CSS选择器的游戏 – CSS Diner(CSS晚餐),既可以学习CSS又可以娱乐,过程十分有趣。
在这个游戏中,你可以学习26个CSS选择器的用法(含CSS3),从简单到高级,比如子元素选择器、后代选择器、伪元素选择器等等,如果你玩完这个Css Diner,我想你对CSS的选择器已经了解差不多了。比如下面一起来看看如何玩法。
游戏链接:http://flukeout.github.io/
输入对应晃动物品的元素,物品飞走,你就过关成功
下面附上参考答案

  1. plate
  2. bento
  3. #fancy
  4. plate apple
  5. #fancy pickle
  6. .small
  7. orange.small
  8. bento orange.small
  9. bento,plate
  10. apple,plate orange,bento,bento orange,plate 或者 *
  11. #fancy orange,plate pickle,plate apple 或者 plate *
  12. plate + apple
  13. bento~pickle
  14. plate>apple
  15. orange:first-child
  16. plate apple,plate pickle
  17. .small:last-child
  18. :nth-child(3)
  19. bento:nth-last-child(3)
  20. apple:first-of-type
  21. plate:nth-of-type(even)
  22. plate:nth-of-type(2n+3)
  23. plate apple:only-of-type
  24. orange:last-of-type,apple:last-of-type
  25. bento:empty
  26. :not(.small,plate)
  27. [for]
  28. plate[for]
  29. bento[for="Vitaly"]
  30. [for^=S]
  31. [for$=to]
  32. [for*=bb]
    好了答案在这里了,有什么清楚的朋友可以联系我或者留言。

你可能感兴趣的:(CSS Diner – 边学CSS选择器,边享受晚餐)