CSS餐厅练习链接及参考答案
餐厅练习链接: https://flukeout.github.io/文章目录
- CSS餐厅练习链接及参考答案
- 一、level 1
- 二、level 2
- 三、level 3
- 四、level 4
- 五、level 5
- 六、level 6
- 七、level 7
- 八、level 8
- 九、level 9
- 十、level 10
- 十一、level 11
- 十二、level 12
- 十三、level 13
- 十四、level 14
- 十五、level 15
- 十六、level 16
- 十七、level 17
- 十八、level 18
- 十九、level 19
- 二十、level 20
- 二十一、level 21
- 二十二、level 22
- 二十三、level 23
- 二十四、level 24
- 二十五、level 25
- 二十六、level 26
- 二十七、level 27
- 二十八、level 28
- 二十九、level 29
- 三十、level 30
- 三十、level 31
- 三十、level 32
- 总结
一、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) 也可以这样去理解。