今天我们将介绍一个用来学习CSS选择器的游戏 – CSS Diner(CSS晚餐)，既可以学习CSS又可以娱乐，过程十分有趣。
在这个游戏中，你可以学习26个CSS选择器的用法（含CSS3），从简单到高级，比如子元素选择器、后代选择器、伪元素选择器等等，如果你玩完这个Css Diner，我想你对CSS的选择器已经了解差不多了。比如下面一起来看看如何玩法。
游戏玩法
第一关
如下图，这游戏要我们选择画面中会”动”的元素，下图是两个碟子，哪么我们就选择碟子了。
2018-09-09 15-17-37.jpg
碟子的选择器为plate，输入后回车，如果答案正确就会跳到下一题
答案：plate
第二关
2018-09-09 15-18-13.jpg
答案：bento
第三关
2018-09-09 15-32-36.jpg
答案：#fancy
第四关
2018-09-09 15-33-01.jpg
答案：plate apple
第五关
2018-09-09 15-33-33.jpg
答案：#fancy pickle
第六关
2018-09-09 15-34-12.jpg
答案：.small
第七关
2018-09-09 15-35-00.jpg
答案：orange.small
第八关
2018-09-09 15-36-09.jpg
答案：bento orange.small
第九关
2018-09-09 15-36-44.jpg
答案：plate，bento
第十关
2018-09-09 15-37-11.jpg
答案：*
第十一关
2018-09-09 15-37-45.jpg
答案：plate *
第十二关
2018-09-09 15-41-17.jpg
答案：plate+apple.small,plate+apple
第十三关
2018-09-09 15-42-09.jpg
答案：bento~pickle
第十四关
2018-09-09 15-42-37.jpg
答案：plate>apple
第十五关
2018-09-09 15-43-22.jpg
答案：plate orange:first
第十六关
2018-09-09 15-44-23.jpg
答案：plate apple,plate pickle
第十七关
2018-09-09 15-45-06.jpg
答案：#fancy apple,pickle:last
第十八关
2018-09-09 15-46-04.jpg
答案：plate:nth-child(3)
第十九关
2018-09-09 15-50-16.jpg
答案：bento:nth-last-child(4)
第二十关
2018-09-09 15-52-11.jpg
答案：apple:first-of-type
第二十一关
2018-09-09 15-53-08.jpg
答案：plate:nth-of-type(2n)
第二十二关
2018-09-09 15-54-34.jpg
答案：plate:nth-of-type(2n+3)
第二十三关
2018-09-09 15-56-28.jpg
答案：apple:only-of-type
第二十四关
2018-09-09 15-58-53.jpg
答案：orange:last-of-type,apple:last-of-type
第二十五关
2018-09-09 15-59-27.jpg
答案：bento:empty
第二十六关
2018-09-09 16-00-07.jpg
答案：apple:not(.small)
祝贺这样就全部通关了！
有兴趣的小伙伴们可以找来试着玩一玩，说不定会有别的解法，欢迎交流
