CSS选择器餐厅练习共32关
练习地址：https://github.com/flukeout/css-diner 通过CSS餐厅来练习一些常用的选择器
或者直接打开网页：https://flukeout.github.io/
第一关：元素选择器
plate
plate元素
select the plates
第二关：元素选择器
bento
bento元素
select the bento plate
第三关：ID选择器
#fancy
id为fancy的元素
select the fancy plate
第四关：后代选择器
plate apple
plate祖先元素下的后代元素apple
select the apple on the plate
第五关：结合后代和ID选择器
#fancy pickle
id为fancy的祖先元素下的pickle元素
select the pickle on the fancy plate
第六关：类选择器
.small
类名为small的元素
select the small apple
第七关：结合类选择器
orange.small
同时满足类名为small且为orange的元素
select the small orange
第八关：后代选择器和类选择器
bento orange.small
bento父元素下面类名为small的orange的子元素
select the small orange in the bentos
第九关：逗号选择器
plate,bento
在div元素中的plate和bento元素
selector all the plates and bentos
第十关：通配选择器
*
在主体中的所用元素
select all things
第十一关：结合通用选择器
plate *
plate父元素的所有子元素
select everyting on a plate
第十二关：相邻兄弟选择器
plate+apple
plate元素的后一个元素
selelc evey apple that’s next to a apple
第十三关：通用兄弟选择器
bento~pickle
bento元素后的多个pickle元素
select the pickle beside the bento
第十四关：后代选择器
plate>apple
plate父元素下面的apple子元素
select the apple directly on a plate
第十五关：:first-child
orange:first-child
第一个orange元素
select the top orange
第十六关：:only-child
plate :only-child
选择plate中唯一种类的子元素
select the apple and the pickle on the plate
注意：only-child 选择器匹配属于父元素中唯一子元素的元素
第十七关：:last-child
#fancy :last-child,pickle:last-child
select the small apple and the pickle
选择id为fancy的元素最后一个子元素和pickle元素的最后一个元素
第十八关：:nth-child
plate:nth-child(3)
select the 3rd plate
选择第三个plate元素
第十九关：:nth-last-child(a)
bento:nth-last-child(3)
倒数从第三个开始的bento元素
select the 1st bento
第二十关：:first-of-type
apple:first-of-type
第一个apple元素
select first apple
第二十一关：:nth-of-type
plate:nth-of-type(even)
选择所有偶数个的plate
select all even plates
第二十二关：:nth-of-type(An+B)
plate:nth-of-type(2n+3)
从第三个元素起，每隔一个选择一个plate元素
select evey 2nd plate，starting from the 3rd
第二十三关：:only-of-type
plate apple:only-of-type
plate元素中仅有一个的apple元素
select the apple on the middle plate
注意：only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
第二十四关：:last-of-type
orange:last-of-type,apple:last-of-type
选择最后一个orange元素和最后一个apple元素
select the last apple and orange
第二十五关：:empty
bento:empty
select the empty bentos
注意：:empty选择器匹配没有子元素（包括文本节点空格）的每个元素
第二十六关：:not(X)
apple:not(.small)
选择类名不为small的apple元素
select the big apple
注意：:not()选择器匹配没和元素是不是指定的元素/选择器
第二十七关：[attribute] 属性选择器
[for]
有for属性的所有元素
select the items for someone
注意：[attribute] 属性选择器选择有相应属性的元素
第二十八关：A[attribute] 属性选择器
plate[for]
有for属性的plate元素
select the plates for someone
第二十九关：[attribute=’value’]
[for='Vitaly']
选择for属性值为Vitaly的元素
select Vitaly‘s meal
注意：[attribute=’value’]属性选择器选择属性为指定值的元素
第三十关：[attribute^=’value’]
[for^='Sa']
for属性值以Sa开始的所有元素
select the items for names that start width ’Sa’
注意：[attribute^=’value’] 属性选择器选择所有属性值以指定字母开始的元素
第三十一关：[attribute$=”value”]
[for$='ato']
选择for属性值以ato结尾的元素
select the items for names that end width ‘ato’
注意：[attribute$=”value”] 属性选择器后面的后几个字母需要以 value结尾
第三十二关：[attribute*=”value”]
[for*='obb']
选择for属性值中包含obb的元素
select the meals for names that contain ’obb’
注意：[attribute*=”value”]选择器匹配元素属性值包含指定值的元素
