一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。
练习/游戏地址：flukeout.github.io/
游戏玩法
游戏共计32关，每一关都要利用给出的提示，利用选择器来选择相应的道具。
要选择的道具，不仅有文字提示（英文），且道具会左右摇摆，较为直观。
如果选择器书写错误，编辑器会震动；选择的是多个道具时，某个道具写错，对应的道具会震动。
如果选择器书写正确，编辑器里的代码会向上移动，进入下一关。
鼠标悬浮在桌上的道具时，会显示道具的标签，以及在源码里高亮标签。
游戏里，道具的设计非常巧妙，整个div是一张桌子。桌子上从左往右放着一些盘子，水果。
这些盘子和水果都是桌子的子级。
同时，盘子里的水果是盘子的子级。
如果盘子带花纹，表示这个盘子具有特定的class。
盘子里的水果或直接摆放在桌上的水果，可以被贴上标签，表示这个给某人吃的。这里的标签表示html里的属性。
整个设计非常巧妙。
比较可惜的是，通关后，只能看到进度更新了，但是通关的代码却没有被保存下来。（所以其实我做了2遍）
练习过程，巩固了选择器的使用。尤其是伪类，伪类是描述特定状态下的元素，冒号前是被修饰的元素。
游戏界面
左侧是题目和编辑器，右侧是学习/提示，游戏进度。
另外支持跳转到特定关卡。
下方蓝色高亮部分是输入区，也是唯一输入的地方。无论是选择器，还是关卡数。
可以结合之前的青蛙游戏，一起学习下类似这种通过游戏类学习编码的网站的设计与实现。
通关记录
1/32 A
2/32 A
3/32 #id
4/32 A B
5/32 #id A
6/32 .classname
7/32 A.className
8/32 Put your back into it
9/32 A,B
10/32 *
11/32 A*
12/32 A+B
下一个同级
13/32 A~B
后面的所有同级
14/32 A>B
第一个子代
15/32 :first-child
注意不要写成：plate:first-child，应是orange:first-child，表示第一个橘子。
伪类修饰冒号前面的元素。表示选择特定状态的元素，冒号前面是具体的元素。
16/32 :only-child
这题有两种解法：
法一
法二
因为只有一个苹果在盘子里，而黄瓜必须指明是在白色盘子里的。
17/32 :last-child
这题容易出错，
pickle.small:last-child不行？
18/32 :nth-child(A)
19/32 :nth-last-child(A)
在github，开发者特别提到该题容易让人困惑。
容易出错，写成bento:nth-last-child(2)倒数第三个，但是不是按类型算的倒数第二个，而是整体计算的倒数第三个。
20/32 :first-of-type
21/32 :nth-of-type(A)
22/32 :nth-of-type(An+B)
这里的n从0开始数
23/32 :only-of-type
要有父元素，第一个盘子里有两个苹果，所以不会选中。只会选中只有一个苹果的第二个盘子里的苹果。
24/32 :last-of-type
25/32 :empty
26/32 :not(x)
27/32 [attribute]
28/32 A[attribute]
29/32 [attribute="value"]
30/32 [attribute^="value"]
31/32 [attribute$="value"]
32/32 [attribute*="value"]
Ps：由于html的根标签是div，所以选择器省略了处于div下。
