下載地址：https://github.com/flukeout/css-diner 通過CSS餐廳來練習一些常用的選擇器
第一關：元素選擇器
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"]選擇器匹配元素屬性值包含指定值的元素