css diner玩法

今天我们将介绍一个用来学习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)

祝贺这样就全部通关了！
有兴趣的小伙伴们可以找来试着玩一玩，说不定会有别的解法，欢迎交流