CSS餐厅练习

餐厅选择器练习地址：http://flukeout.github.io/
元素选择器
第1关
plate
选中 plate 元素
第2关
bento
选中 bento 元素
id选择器
第3关
#fancy
选中 id = “fancy” 的元素
后代选择器
第4关
plate apple
选中 plate 祖先元素下的 apple 后代元素
第5关
#fancy pickle
选中 id = “fancy” 祖先元素下的 pickle 后代元素
类选择器
第6关
.small
选中 class = “small” 的元素
第7关
orange.small
选中 orange 组中的 class = “small” 的元素
第8关
bento orange.small
选中 bento 父元素下 class = “small” 的orange子元素
选择器分组（并集选择器）
第9关
plate,bento
同时选中 plate,bento 对应的元素
通配符选择器
第10关
*
选中页面中的所有元素
第11关
plate *
选中 plate 中的所有子元素
关系选择器
第12关
plate+apple
选择下一个兄弟，即 plate 元素的后一个元素
第13关
bento~pickle
选择下边的所有兄弟，即 bento 下边的所有 pickle 兄弟
子元素选择器
第14关
plate>apple
选中指定父元素的指定子元素,即父元素 plate 中的子元素 apple
伪类选择器
第15关
plate orange:first-child
选中 plate 中的第一个 orange 元素
第16关
plate :only-child
选中 plate 中那个唯一的元素
第17关
#fancy apple:last-child,pickle:last-child
选中 apple 元素的最后一个和pickle元素的最后一个
第18关
plate:nth-child(3)
选中 div 中的第3个孩子 plate
第19关
bento:nth-last-child(3)
选择子元素中的倒数第三个，即选中 div 中倒数第3个孩子 bento
第20关
apple:first-of-type
选中类型为 apple 的第一个元素
第21关
plate:nth-of-type(even)
同类型偶数位，即选中类型为 plate 的偶数位上的元素
第22关
plate:nth-of-type(2n+3)
同类型的，每2个选择一个 plate，从第3 个开始，包括第3个
第23关
plate apple:only-of-type
在任意 plate 中选择一个有唯一的 apple 的元素
第24关
orange.small:last-of-type,apple.small:last-of-type
选中 orange.small、apple.small 的最后一个元素
第25关
bento:empty
选择没有子元素的元素，即 bento 为空的元素
第26关
apple:not(.small)
选择所有与否定选择器不匹配的元素，即选所有没有 class=“small” 的 apple
属性选择器
第27关
apple[for],plate[for],bento[for]
属性选择器 选中有 for 属性的元素
第28关
plate[for]
选中有 for 属性的 plate
第29关
bento[for=Vitaly]
选中 for 的属性值为 Vitaly 的 bento
第30关
plate[for^=S],bento[for^=S]
选中 for 的属性值以 S 开头的元素
第31关
bento[for$=o],plate[for$=o]
选中 for 的属性值以 o 结尾的元素
第32关
bento[for*=odd]
选中 for 的属性值中包含 odd 的元素