CSS选择器餐厅练习（32题版本）

网址

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

 第一关：Select the plates      答案：plate

 第二关：Select the bento boxes      答案：bento

 第三关：Select the fancy plate      答案：#fancy

 第四关：Select the apple on the plate     答案：plate>apple

 第五关：Select the pickle on the fancy plate   答案：#fancy>pickle

 第六关：Select the small apples   答案：.small

 第七关：Select the small oranges    答案：bento .small,plate .small

 第八关：Select the small oranges in the bentos   答案：bento .small:not(apple)

 第九关：Select all the plates and bentos    答案：plate,bento

 第十关：Select all the things!     答案：*

 十一关：Select everything on a plate    答案：plate *

 十二关：Select every apple that's next to a plate   答案：plate+apple

 十三关：Select the pickles beside the bento    答案：bento~pickle

 十四关：Select the apple directly on a plate      答案：plate>apple

 十五关：Select the top orange      答案：orange:first-child

 十六关：Select the apple and the pickle on the plates     答案：plate *:not(orange)

 十七关：Select the small apple and the pickle     答案：plate>apple,pickle

 十八关：Select the 3rd plate      答案：plate:nth-child(3)

 十九关：Select the 1st bento     答案：bento:first-of-type

 二十关：Select first apple    答案：apple:first-of-type

 二十一：Select all even plates   答案：plate:nth-of-type(even)

 二十二：Select every 2nd plate, starting from the 3rd   答案：plate:nth-of-type(2n+3)

 二十三：Select the apple on the middle plate    答案：plate:nth-child(2) apple

 二十四：Select the last apple and orange    答案：.small:last-of-type

 二十五：Select the empty bentos     答案：bento:empty

 二十六：Select the big apples    答案：apple:not(.small)

 二十七：Select the items for someone    答案：[for]

 二十八：Select the plates for someone   答案：plate[for]

 二十九：Select Vitaly's meal    答案：[for="Vitaly"]

 三十关：Select the items for names that start with 'Sa'   答案：[for^="Sa"]

 三十一：Select the items for names that end with 'ato'    答案：[for$="ato"]

 三十二：Select the meals for names that contain 'obb'    答案：[for*="obb"]