css选择器练习——css餐厅练习题

CSS Diner - Where we feast on CSS Selectors!链接：

CSS Diner - Where we feast on CSS Selectors!

---

第一关
plate

第二关
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的元素

第二十七关
[for]
选中所有用for属性命名的元素

第二十八关
plate[for]
选中所有用for属性命名的plate
第二十九关
[for=Vitaly]
选中指定的用for属性命名的Vitaly

第三十关
[for^=sa]
选中for属性中以Sa开头的元素

第三十一关
 [for$=ato]
选中for属性中以ato结尾的元素（
第三十二关
[for*=obb]
选中for属性中含有obb的元素