MENU

CSS选择器餐厅练习

2022 年 01 月 04 日 • 学习

地址http://cssyx.aizni.cn/

CSS选择器餐厅练习

第一关 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 .small:not(apple)

第九关 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-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)

第二十七关 Select the items for someone 选择带有人名的标签
答案:[for]

第二十八关 Select the plates for someone 选择带有人名的plate
答案:plate[for]

第二十九关 Select Vitaly's meal 选择人名为Vitaly的食物
答案:[for="Vitaly"]

第三十关 Select the items for names that start with 'Sa' 选择人名为"Sa"开头的标
答案:[for^="Sa"]

第三十一关 Select the items for names that end with 'ato' 选择人名"ato"结尾的标签
答案:[for$="ato"]

第三十二关 Select the meals for names that contain 'obb' 选择人名包含"obb"的标签
答案: [for*="obb"]