CSS选择器餐厅练习

最新推荐文章于 2023-03-19 23:06:06 发布

原创最新推荐文章于 2023-03-19 23:06:06 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

HTML/CSS基础教程学习专栏收录该内容

10 篇文章

订阅专栏

这篇博客通过一个餐厅的场景，详细介绍了如何利用CSS选择器来实现各种元素的精准定位和样式设置，帮助读者深入理解并提升CSS选择器的运用能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS选择器餐厅练习

练习地址
http://flukeout.github.io/

答案：
1.
plate
div plate
.class plate
div.class plate

2.
同上

3.
#fancy
plate:first-child
plate:first-of-type

4.
plate apple
plate>apple

5.
#fancy pickle
#fancy>pickle

6.
.small
apple.small

7.
orange.small

8.
bento orange.small
bento>orange.small

9.
plate,bento

10.
*
div
div *

11.
plate *

12.
plate+apple

13.
bento~pickle
pickle:nth-child(2),pickle:nth-child(3)

14.
plate>apple

15.
plate :first-child
plate :nth-child(1)
plate :first-of-type
plate :nth-of-type(1)

16.
plate :only-child

17.
#fancy :last-child,pickle:last-child
apple.small,pickle.small

18.
plate:nth-child(3)
.table :nth-child(3)

19.
bento:nth-last-child(3)
bento:first-of-type
bento:first-child
.table :nth-child(2)

20.
apple:first-of-type
apple:first-child

21.
plate:nth-of-type(even)
plate:nth-child(even)

22.
plate:nth-of-type(2n+3)
plate:nth-child(2n+3)

23.
apple:only-of-type
plate:nth-child(2) apple

24.
orange:last-of-type,apple:last-of-type
orange:last-of-child(1),apple:last-of-child(1)

25.
bento:empty

26.
apple:not(.small)

27.
apple[for],plate[for],bento[for]

28.
plate[for]

29.
bento[for="Vitaly"]

30.
plate[for^='Sa'],bento[for^='Sa']

31.
plate[for$='ato'],bento[for$='ato']

32.
bento[for*='obb']