CSS Dinner 与选择器

CSS提供了丰富的选择器类型，包括标记选择器、类选择器、id选择器、伪类选择器及属性选择器等。

CSS Dinner是一个辅助学习CSS选择器的小游戏，这次借助这个游戏结合实际操作，希望对CSS选择器能更好掌握。

接下来开始have CSS dinner！

• 第一关
  标记选择器（Type Selector）

task1

html1

答案：plate

• 第二关
  标记选择器（Type Selector）

task2

html2

答案：bento

• 第三关
  id选择器（ID Selector）

task3

html3

答案：#fancy

• 第四关
  后代（包含）选择器（Descendant Selector）

task4

html4

答案：plate apple

• 第五关
  id选择器与后代（包含）选择器结合

task5

html5

答案：#fancy pickle

• 第六关
  类选择器（Class Selector）

task6

html6

答案：.small

• 第七关
  类选择器与其它选择器结合

task7

html7

答案：orange.small

• 第八关
  后代选择器 & 类选择器与其它选择器结合

task8

html8

答案：bento orange.small

• 第九关
  组合选择器（Comma Combinator）

task9

html9

答案：bento,plate

• 第十关
  通用选择器（The Universal Selector）

task10

html10

答案：*

• 第十一关
  通用选择器与其它选择器结合

task11

html11

答案：plate *

• 第十二关
  相邻兄弟选择器（Adjacent Sibling Selector）

task12

html12

答案：plate+apple

• 第十三关
  通用兄弟选择器（General Sibling Selector）

task13

html13

答案：bento~pickle

• 第十四关
  子元素选择器（Child Selector）

task14

html14

答案：plate>apple

• 第十五关
  首子元素选择器（First Child Pseudo-selector）

task15

html15

答案：plate orange:first-child

• 第十六关
  唯一子元素选择器（Only Child Pseudo-selector）
  You can select any element that is the only element inside of another one.

task16

html16

答案：plate *:only-child

• 第十七关
  最后子元素选择器（Last Child Pseudo-selector）

task17

html17

答案：#fancy apple:last-child, :last-child

注意：选择pickle的选择器“：last-child”前有空格，表示父元素为最外层的“table”。

• 第十八关
  第n个子元素选择器（Nth Child Pseudo-selector）

task18

html18

答案：:nth-child(3)
注意：:nth(3)选择的是最后一个盘子（没有-child），即fancy plate。

• 第十九关
  倒数第n个子元素选择器（Nth Last Child Selector）

task19

html19

答案：bento:nth-last-child(3)

• 第二十关
  首类型元素选择器（First of Type Selector）

task20

html20

答案：apple:first-of-type

• 第二十一关
  第n个类型元素选择器（Nth of Type Selector）

task21

html21

答案：nth-of-type(even)

• 第二十二关
  第f(n)个类型元素选择器（Nth-of-type Selector with Formula）

task22

html22

答案：nth-of-type(2n+3)

• 第二十三关
  唯一类型元素选择器（Only of Type Selector）

task23

html23

答案：apple:only-of-type

• 第二十四关
  最后类型元素选择器（Last of Type Selector）

task24

html24

答案：orange:last-of-type,apple:last-of-type

• 第二十五关
  空选择器（Empty Selector）

task25

html25

答案：bento:empty

• 第二十六关
  反向选择器（Negation Pseudo-class）

task26

html26

答案：apple:not(small)

• 第二十七关
  属性选择器（Attribute Selector）

task27

html27

答案：[for]

• 第二十八关
  属性选择器（Attribute Selector）

task28

html28

答案：plate[for]

• 第二十九关
  属性值选择器（Attribute Value Selector）

task29

html29

答案：[for=Vitaly]

• 第三十关
  属性值开头选择器（Attribute Starts With Selector）

task30

html30

答案：[for^="Sa"]

• 第三十一关
  属性值结尾选择器（Attribute Ends With Selector）

task31

html31

答案：[for$="ato"]

• 第三十二关
  属性值通配符选择器（Attribute Wildcard Selector）

task32

html32

答案：[for*="obb"]