CSS选择器餐厅练习(26题版本)

网盘地址

https://pan.baidu.com/s/1irMJes6u_TelLaPjhmOTIw
提取码:ze2z

需要注意的是26题版本的第8关和第25关与32题版本的不太一样

第一关        Select the plates        选择所有的plate

答案:plate

第二关        Select the bento boxes        选择所有的bento

答案:bento

第三关        Select the fancy plate        选择带条纹的plate

答案:#fancy

第四关        Select the apple on the plate        选择盘子上的apple

答案:plate apple  或  plate>apple

第五关        Select the pickle on the fancy plate        选择带条纹plate上的pickle

答案:#fancy pickle  或  #fancy>pickle

第六关        Select the small apples        选择所有的small apple

答案:.small

第七关        Select the small oranges        选择所有的small orange

答案:bento .small,plate .small

第八关        Select the small oranges in the bentos        选择在bento上的所有orange

答案:bento>orange  或  bento orange

第九关        Select all the plates and bentos            选择所有的plate和bento

答案:plate,bento

第十关        Select all the things        选择所有的

答案:*

第十一关        Select everything on a plate        选择所有在plate上的

答案:plate>*  或  plate *

第十二关        Select every apple that's next to a plate        选择挨着plate的apple

答案:plate+apple

第十三关        Select every pickle to the right of the bento        选择在bento右边的pickle

答案:bento~pickle

第十四关        Select the apple directly on a plate        选择直接放在plate上的apple

答案:plate>apple

第十五关        Select the top orange        选择最上边的orange

答案:orange:first-child

第十六关        Select the apple and the pickle on the plates        选择在plate上的apple和pickle

答案:plate>apple,plate>pickle        或        apple:only-child,pickle:only-child

第十七关        Select the small apple and the pickle        选择small apple和pickle

答案:apple,pickle  或  #fancy apple:last-child,pickle:last-child

第十八关        Select the 3rd plate        选择第三个plate

答案: plate:nth-of-type(3) 或  plate:nth-child(3)

第十九关        Select the 1st bento        选择第一个bento

答案:bento:first-of-type  或  bento:not(bento:last-of-type)  或  :nth-last-child(4)

第二十关        Select first apple        选择第一个apple

答案:apple:first-child  或 apple:first-of-type

第二十一关        Select all even plates        选择第偶数个的plate

答案:plate:nth-of-type(even)

第二十二关    Select every 2nd plate, starting from the 3rd    从第三个plate开始选择每第二个plate

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

第二十三关        Select the apple on the middle plate        选择中间plate上的apple

答案:plate:nth-child(2) apple  或  plate apple:only-of-type      

 

第二十四关        Select the second apple and orange        选择第二个apple以及第二个orange

答案:.small:last-of-type

第二十五关        Select the empty bentos        选择空的bonto

答案:bento:not(:nth-child(2))  或  bento:not(:nth-of-type(2))  或  bento:empty

第二十六关        Select the big apples        选择所有的大apple

答案:apple:not(.small)

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
HTML5/CSS 餐厅选择器 第一关 plate plate元素 第二关 bento bento元素 第三关 #fancy id为fancy的元素 第四关 plate apple plate祖先元素下的apple后代元素 第五关 #fancy pickle id为#fancy的祖先元素下的pickle后代元素 第六关 .small 组为small的元素 第七关 orange.small 组为small的orange元素 第八关 bento>orange.small bento父元素下的组为small的orange子元素 第九关 plate,bento,div plate,bento兄弟元素在div元素中 第十关 * *代表所有元素 第十一关 plate>* plate父元素的所有子元素 第十二关 plate + apple 兄弟元素选择器,plate元素的后一个元素 第十三关 bento~pickle 兄弟元素选择器,bento元素后的多个pickle元素 第十四关 plate>apple plate父元素下的apple子元素 第十五关 plate orange:first-child 子元素选择器,plate元素下的第一个orange元素 第十六关 plate :only-child 所有plate元素下的元素 第十七关 #fancy :last-child,pickle:last-child id为fancy的元素的最后一个和pickle元素的最后一个 第十八关 div plate:nth-child(3) div元素中的第三个plate元素 第十九关 div bento :nth-last-child(4) div元素中倒数第四个bento元素 第二十关 apple:first-of-type 第一个apple元素 第二十一关 plate:nth-of-type(even) 所有偶数个的plate元素 第二十二关 plate:only-of-type(6n+3),plate:only-of-type(6n+5) plate元素下的第3个和第5个元素 第二十三关 plate apple.small:only-of-type plate元素下满足apple.small元素的唯一一个元素 第二十四关 orange.small:last-of-type,apple.small:last-of-type 是orange.samll和apple.small元素的最后一个元素 第二十五关 bento:empty bento元素里没有包括额外元素 第二十六关 apple:not(.small) apple里没有组是.small的元素

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值