CSS餐厅练习链接及参考答案

CSS餐厅练习链接及参考答案

餐厅练习链接： https://flukeout.github.io/

---

一、level 1

选择器类型：元素选择器（又名类型选择器）

参考答案：plate

二、level 2

选择器类型：元素选择器（又名类型选择器）

参考答案：bento

三、level 3

选择器类型：ID选择器（根据元素的id属性值）

参考答案：#fancy

四、level 4

选择器类型：可用后代选择器或者子元素选择器（后代选择器可选择的范围更广,包含该元素所有的后代元素,子元素选择器只选择下一级的元素）

参考答案：plate apple 或者(plate>apple)

五、level 5

选择器类型：id选择器与元素选择器组合（属于交集选择器 类似于level 4）

参考答案：#fancy pickle

六、level 6

选择器类型：类选择器（根据元素的class值）

参考答案：.small

七、level 7

选择器类型：元素选择器与类选择器组合(中间无空格）

参考答案：orange.small

八、level 8

选择器类型：后代选择器或者子元素选择器与元素选择器及类选择器的组合

参考答案：bento orange.small或者bento>orange.small

九、level 9

选择器类型：并集选择器（选择器包含的所有元素）

参考答案：plate,bento

十、level 10

选择器类型：通用选择器（用通配符 * 表示选择所有元素）

参考答案：*

十一、level 11

选择器类型：组合通用选择器（表示选择所有具有相同特征的元素, 此处有空格）

参考答案：plate * 

十二、level 12

选择器类型：相邻兄弟选择器（选择与该元素相邻的 第一个兄弟元素）

参考答案：plate+apple

十三、level 13

选择器类型：所有兄弟选择器（选择该元素后面 所有的兄弟元素）

参考答案：bento~pickle

十四、level 14

选择器类型：子元素选择器（此处不可用后代选择器， 使用后代选择器会将第一个盘子里的apple同时选上）

参考答案：plate>apple

十五、level 15

选择器类型：伪类选择器与后代选择器组合（:first-child表示选择 父元素的子元素序列中的第一个子元素）

参考答案：plate orange:first-child

十六、level 16

选择器类型：伪类选择器与后代选择器或子元素选择器的组合（:only-child表示选择 父元素的子元素序列中没有兄弟元素的元素）

参考答案：plate :only-child或者plate>:only-child

十七、level 17

选择器类型：伪类选择器（:last-child表示选择 具有共同属性且均为其自身父元素的子元素序列中的最后一个元素的元素）

参考答案：.small:last-child

十八、level 18

选择器类型：伪类选择器（:nth-child(n)表示选择 子元素序列中的第n个子元素）

参考答案：plate:nth-child(3)

十九、level 19

选择器类型：伪类选择器（:nth-last-child(n)表示选择 子元素序列中的倒数第n个子元素）

参考答案：bento:nth-last-child(3)

二十、level 20

选择器类型：类型选择器（:first-of-type表示选择 一组具有相同类型的兄弟元素中的第一个元素）

参考答案：apple:first-of-type

二十一、level 21

选择器类型：类型选择器（:nth-of-type(m)表示选择 一组具有相同类型的兄弟元素中处于偶数位或奇数位的元素，m为n的奇数倍或偶数倍， 必须使用字母n）

参考答案：plate:nth-of-type(2n)

二十二、level 22

选择器类型：类型选择器（:nth-of-type(An+B)表示选择 一组具有相同类型的兄弟元素中所有满足An+B的元素，n从0开始计算）

参考答案：plate:nth-of-type(2n+3)

二十三、level 23

选择器类型：类型选择器（:only-of-type表示选择 类型唯一的那个元素 即没有兄弟元素的元素）

参考答案：apple:only-of-type

二十四、level 24

选择器类型：类型选择器（:last-of-type表示选择 一组相同类型兄弟元素中的最后一个元素）

参考答案：.small:last-of-type或orange:last-of-type,apple:last-of-type

二十五、level 25

选择器类型：伪类选择器（:empty表示选择 属性为空的元素）

参考答案：bento:empty

二十六、level 26

选择器类型：伪类选择器（:empty表示选择 除了括号内的元素）

参考答案：apple:not(.small)

二十七、level 27

选择器类型：属性选择器（[attribute]表示选择 具有attribute属性的元素）

参考答案：[for]

二十八、level 28

选择器类型：属性选择器（A[attribute]表示选择 具有attribute属性的A元素）

参考答案：plate[for]

二十九、level 29

选择器类型：属性选择器（[attribute="value"]表示选择 具有attribute属性值为value的元素）

参考答案：[for="Vitaly"]或者bento[for="Vitaly"]

三十、level 30

选择器类型：属性选择器（[attribute^="value"]表示选择 所有attribute属性值用指定特殊字符value开头的元素）

参考答案：[for^="S"]

三十、level 31

选择器类型：属性选择器（[attribute$="value"]表示选择 所有attribute属性值用指定特殊字符value结尾的元素）

参考答案：[for$="o"]或者[for$="ato"]或者[for$="to"]

三十、level 32

选择器类型：属性选择器（[attribute*="value"]表示选择 所有attribute属性值中含有value的元素，在什么位置不重要 ）

参考答案：[for*="obb"]或者[for*="ob"]或者[for*="bb"]

总结

1.:only-child与:only-of-type的区别
:only-child表示选择当当前元素的父元素的子元素序列中，没有其它兄弟元素的元素

:only-of-type表示选择当当前元素在其父元素的子元素序列中，没有其它相同类型兄弟元素的元素

2.:first-child与:first-of-type的区别
:first-child 匹配的是某父元素的第一个子元素，可以说是整体结构上的第一个子元素，无关元素的类型。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是结构上的第一个子元素，只要是该类型元素的第一个即可，无关整体结构。

同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。