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 的元素