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>

posted on 2022-05-28 09:27 我不想一直当菜鸟阅读(707) 评论(0) 编辑收藏举报

CSS选择器练习--餐厅选择

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜