CSS选择器

CSS Diner详情及参考答案

CSS Diner是一个餐厅小游戏，对于学习前端的同学来说，是练习CSS选择器的不错的网站，网址是https://flukeout.github.io/。

1.网页界面

游戏主要有32关，每一关的通关要求在最上方，select the plates选中盘子；实际桌子和盘子就是模拟我们网页，桌子在标签中就是div，盘子就是div中的两个元素plate，对于英语不好的友友，不知道目标单词也没事，谁在抖动就选谁，完事！！！

2.参考答案

1 plate
2 bento
3 #fancy
4 plate>apple 或 plate apple(plate是apple的父元素，父元素同时也是祖先元素，
父元素只有一个，祖先元素可以有多个）
5 #fancy>pickle 或 #fancy pickle
6 .small 或.small,plate.samll
7 orange.small(交集选择器，将类别选择器与元素选择器结合，要注意如果有元素选择器，则需将元素选择器放在前面)
8 bento orange.small(交集选择器)
9 plate,bento(并集选择器)
10 *（通配选择器）
11 plate *（元素选择器和通配选择器结合）
12 plate+apple（兄弟选择器，+只要一个）
13 bento~pickle（兄弟选择器，~全要）
14 plate>apple（后代选择器，空格全要，>只要第一个）
15 plate>orange:first-child 或 plate orange:first-child（伪类选择器的第一个子元素）
16 plate :only-child 或 plate>:only-child（唯一子元素）
注意plate后面有个空格，伪类选择器有加空格和不加空格
加空格plate :only-child表示选中plate的唯一子元素
不加空格 plate:only-child表示选中plate，且该plate是其父元素div下的唯一子元素，显然div下有三个plate；
17 apple,pickle 或 :last-child:not(orange)（结尾元素）
18 :nth-child(3) 或 plate:nth-child(3)（第三个子元素）
19 bento:first-of-type 或 bento:nth-last-child(3) 或 :nth-last-child(3):not(orange)（同类型元素的第一个/bento元素且从后往前的第三个元素/所有从后往前的第三个元素，除了orange元素）
20 apple:first-of-type 或 :nth-child(2):not(orange)
21 :nth-child(even) 或 :nth-child(2n)偶数次2n或even，奇数次2n+1或odd
22 :nth-of-type(2n+3)选择奇数项除了第一个
23 plate apple:only-of-type
24 orange:last-of-type,apple:last-of-type 或 .small:last-of-type
25 bento:empty取空元素
26 apple:not(.small)
27 [for]（属性选择器[属性名]）
28 plate[for]（复合选择器-属性名搭配元素）
29 bento[for=Vitaly] 或 [for="Vitaly"]（属性名=属性值）
30 [for^=Sa]（选择属性值以Sa开头的元素）
31 [for$=ato]（选择属性值以ato结尾的元素）
32[for*=obb]（选择属性值中有odd的元素）