【CSS】CSS餐厅小游戏练习1~32关的参考答案

链接：CSS3餐厅练习

玩法：利用各种选择器选中抖动的物体即可通关

1.Type Selector（元素选择器）

元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

plate

2.Type Selector（元素选择器）

bento

3.ID Selector（ID选择器）

id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}

#fancy

4.Descendant Selector（子元素选择器）

子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

plate>apple

5.Combine the Descendant & ID Selectors(组合子元素和id选择器)

#fancy>pickle

6.Class Selector（类选择器）

类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值

.small

7.Combine the Class Selector（组合类选择器）

orange.small

8.子元素选择器和交集选择器

交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头

bento>orange.small

9.Comma Combinator(并集选择器)

选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
举例： #b1,.p1,h1,span,div.red{}

plate,bento

10.The Universal Selector（通配符选择器）

通配选择器
作用：选中页面中的所有元素
语法: *

*

11.Combine the Universal Selector（组合通配符选择器）

后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代

plate空格*

plate *

12.Adjacent Sibling Selector（兄弟选择器）

兄弟选择器
选择下一个兄弟
语法：前一个 + 下一个
举例：A+B ：（使用加号）表示选择当前兄弟（A）的下一个兄弟（B）元素,以A为定位来选择B

plate+apple

13.General Sibling Selector（通用的兄弟选择器）

选择下边所有的兄弟
语法：兄 ~ 弟

bento~pickle

14.Child Selector (子元素选择器)

plate>apple

15.First Child Pseudo-selector（第一个孩子的伪选择器）

伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素…
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 -:not() 否定伪类
- 将符合条件的元素从选择器中去除

plate>orange:first-child

16.Only Child Pseudo-selector（唯一孩子伪类选择器）

plate>:only-child

17.Last Child Pseudo-selector(最后一个孩子伪类选择器)

.small:last-child

18.Nth Child Pseudo-selector（第n个孩子伪选择器）

plate:nth-child(3)

19.Nth Last Child Selector（倒数第n个孩子伪选择器）

注意：这里的:nth-last-child(n) 中的n是3，因为他不是在同类元素中排序的
:first-of-type
:last-of-type
:nth-of-type()
- 上面这些以type结尾才是在同类型元素中进行排序

bento:nth-last-child(3)

20.First of Type Selector（第一个孩子伪类选择器（在同类元素中排序的））

apple:first-of-type

21.Nth of Type Selector(第n个孩子伪类选择器（在同类元素中排序）)

plate:nth-of-type(2n)
或者
plate:nth-of-type(even)

22.Nth-of-type Selector with Formula（具有公式的 n 次伪类选择器）

Tip: 自己根据规律写出An+B

plate:nth-of-type(2n+3)

23.Only of Type Selector（唯一孩子伪类选择器（在同类元素中排序））

apple:only-of-type

24.Last of Type Selector（最后一个孩子的伪类选择器）

.small:last-of-type

25.Empty Selector（空的伪类选择器）

bento:empty

26.Negation Pseudo-class（否定式伪类选择器）

apple:not(.small)

27.Attribute Selector（属性选择器）

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素

[for]

28.Attribute Selector（属性选择器）

plate[for]

29.Attribute Value Selector（根据属性值选择）

[for="Vitaly"]

30.Attribute Starts With Selector（属性开头选择器）

[for^="Sa"]

31.Attribute Ends With Selector（属性结尾选择器）

[for$="ato"]

32.Attribute Wildcard Selector（属性通配符选择器）

[for*="obb"]