CSS选择器练习--餐厅选择
1.题目：Select the plates
答案：plate
1 <div class="table"> 2 <plate></plate> 3 <plate></plate> 4 </div>
2.题目：Select the bento boxes
答案：bento
1 <div class="table"> 2 <bento></bento> 3 <plate></plate> 4 <bento</bento> 5 </div>
3.题目：Select the fancy plate
答案：#fancy
1 <div class="table"> 2 <plate id="fancy"></plate> 3 <plate></plate> 4 <bento</bento> 5 </div>
4.题目：Select the apple on the plate
答案：plate > apple 或者 plate apple
1 <div class="table"> 2 <bento></bento> 3 <plate> 4 <apple/> 5 </plate> 6 <apple/> 7 </div> 8
5.题目：Select the pickle on the fancy plate
答案：#fancy pickle 或者 plate#fancy > pickle
1 <div class="table"> 2 <bento> 3 <orange/> 4 </bento> 5 <plate id="fancy"> 6 <pickle/> 7 </plate> 8 <plate> 9 <pickle/> 10 </plate> 11 </div> 12
6.题目：Select the small apples
答案：.small
1 <div class="table"> 2 <apple/> 3 <apple class="small"/> 4 <plate> 5 <apple class="small" /> 6 </plate> 7 <plate></plate> 8 </div>
7.题目：Select the small oranges
答案： orange.small
1 <div class="table"> 2 <apple/> 3 <apple class="small"/> 4 <bento> 5 <orange class="small"/P> 6 </bento> 7 <plate> 8 <orange/> 9 </plate> 10 <plate> 11 <orange class="small"/> 12 </plate> 13 </div> 14
8.题目：Select the small oranges in the bentos
答案：bento orange.small 或者 bento > orange.small
1 <div class="table"> 2 <apple/> 3 <plate> 4 <orange class="small"/> 5 </plate> 6 <bento> 7 <orange class="small"/> 8 </bento> 9 <bento> 10 <apple class="small"/> 11 </bento> 12 <bento> 13 <orange class="small"/> 14 </bento> 15 </div> 16
9.题目：Select all the plates and bentos
答案：plate,bento
1 <div class="table"> 2 <pickle class="small" /> 3 <pickle/> 4 <plate> 5 <pickle/> 6 </plate> 7 <bento> 8 <pickle/> 9 </bento> 10 <plate> 11 <pickle/> 12 </plate> 13 <pickle/> 14 <pickle class="small"/> 15 </div> 16
10.题目：Select all the things!
答案：*
1 <div class="table"> 2 <apple/> 3 <plate> 4 <orange class="small"/P> 5 </plate> 6 <bento></bento> 7 <bento> 8 <orange/> 9 </bento> 10 <plate id="fancy"></plate> 11 </div> 12
11.题目：Select everything on a plate
答案：plate *
1 <div class="table"> 2 <plate id="fancy"> 3 <orange class="small" /> 4 </plate> 5 <plate> 6 <pickle/> 7 </plate> 8 <apple class="small"/> 9 <plate> 10 <apple/> 11 </plate> 12 </div> 13
12.题目：Select every apple that's next to a plate
答案：plate + apple
1 <div class="table"> 2 <bento> 3 <apple class="small"/> 4 </bento> 5 <plate></plate> 6 <apple class="small" /> 7 <plate></plate> 8 <apple/> 9 <apple class="small" /> 10 <apple class="small" /> 11 </div>
13.题目：Select every pickle to the right of the bento
答案：bento~pickle
1 <div class="table"> 2 <pickle/> 3 <bento> 4 <orange class="small"/P> 5 </bento> 6 <pickle class="small"/><pickle/> 7 <plate> 8 <pickle/> 9 </plate> 10 <plate> 11 <pickle class="small"/></plate> 12 </div> 13
14.题目：Select the apple directly on a plate
答案：plate > apple
1 <div class="table"> 2 <plate> 3 <bento> 4 <apple/> 5 </bento> 6 </plate> 7 <plate> 8 <apple/> 9 </plate> 10 <plate></plate> 11 <apple/> 12 <apple class="small"/> 13 </div> 14
15.题目：Select the top orange
答案：plate > orange:first-child 或者 orange:first-child
1 <div class="table"> 2 <bento></bento> 3 <plate></plate> 4 <plate> 5 <orange/><orange/> 6 <orange/></plate> 7 <pickle class="small" /> 8 </div> 9
16.题目：Select the apple and the pickle on the plates
答案：plate>apple:only-child,plate>pickle:only-child
1 <div class="table"> 2 <plate> 3 <apple/> 4 </plate> 5 <plate> 6 <pickle class="small"/P> 7 </plate> 8 <bento></bento> 9 <pickle/> 10 <plate> 11 <orange class="small"/><orange/> 12 </plate> 13 <pickle class="small"/> 14 </div>
17.题目：Select the small apple and the pickle
答案：apple,pickle 或者 apple:last-child,pickle:last-child
1 <div class="table"> 2 <plate id="fancy"> 3 <apple class="small"/> 4 </plate> 5 <plate></plate> 6 <plate> 7 <orange class="small"/P><orange/> 8 </plate> 9 <pickle class="small" /> 10 </div>
18.题目：Select the 3rd plate
答案：plate:nth-of-type(3) 或者 plate:nth-child(3)
1 <div class="table"> 2 <plate></plate> 3 <plate></plate> 4 <plate></plate> 5 <plate id="fancy"></plate> 6 </div>
19.题目：Select the 1st bento
答案：bento:nth-of-type(1) 或者 bento:nth-last-child(4)
1 <div class="table"> 2 <plate></plate> 3 <bento></bento> 4 <apple class="small"/> 5 <plate> 6 <orange/> 7 <orange/> 8 <orange/> 9 </plate> 10 <bento></bento> 11 </div> 12
20.题目：Select first apple
答案：apple:first-of-type
1 <div class="table"> 2 <apple/> 3 <apple class="small"/> 4 <apple class="small"/> 5 <apple class="small"/> 6 <plate> 7 <orange class="small"/><orange/> 8 </plate> 9 </div>
21.题目：Select all even plates
答案：plate:nth-child(even) 或者 plate:nth-of-type(2n)
1 <div class="table"> 2 <plate></plate> 3 <plate</plate> 4 <plate</plate> 5 <plate></plate> 6 <plate id="fancy"></plate> 7 <plate></plate> 8 </div>
22.题目：Select every 2nd plate, starting from the 3rd
答案：plate:nth-of-type(2n+3)
1 <div class="table"> 2 <plate></plate> 3 <plate> 4 <pickle class="small"/P> 5 </plate> 6 <plate> 7 <apple class="small" /> 8 </plate> 9 <plate></plate> 10 <plate> 11 <apple/> 12 </plate> 13 <plate</plate> 14 </div>
23.题目：Select the apple on the middle plate.
答案：apple.small:only-of-type 或者 apple:only-of-type
1 <div class="table"> 2 <plate> 3 <apple class="small" /><apple/> 4 </plate> 5 <plate> 6 <apple class="small" /> 7 </plate> 8 <plate> 9 <pickle class="small"/P> 10 </plate> 11 </div>
24.题目：Select the second apple and orange
答案：orange:last-of-type,apple:last-of-type 或者 orange:nth-of-type(2),apple:nth-of-type(2)
1 <div class="table"> 2 <orange class="small"/> 3 <orange class="small" /> 4 <pickle/> 5 <pickle/> 6 <apple class="small"/> 7 <apple class="small"/> 8 </div>
25.题目：Select the empty bentos
答案：bento:empty 或者 bento:not(:nth-of-type(2))
1 <div class="table"> 2 <bento></bento> 3 <bento> 4 <pickle class="small"/> 5 </bento> 6 <bento></bento> 7 <bento></bento> 8 </div>
26.题目：Select the big apples
答案：apple:not(.small) 或者 apple:not(#fancy>apple)
1 <div class="table"> 2 <plate id="fancy"> 3 <apple class="small" /> 4 </plate> 5 <plate> 6 <apple/> 7 </plate> 8 <apple/> 9 <plate> 10 <orange class="small"/> 11 </plate> 12 <pickle class="small"/> 13 </div>
