CSS Dinner 与选择器

html-css022

CSS Dinner 与选择器,第1张

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

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

接下来开始have CSS dinner!

答案: plate

答案: bento

答案: #fancy

答案: plate apple

答案: #fancy pickle

答案: .small

答案: orange.small

答案: bento orange.small

答案: bento,plate

答案: *

答案: plate *

答案: plate+apple

答案: bento~pickle

答案: plate>apple

答案: plate orange:first-child

答案: plate *:only-child

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

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

答案: :nth-child(3)

注意::nth(3)选择的是最后一个盘子(没有-child),即fancy plate。

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

答案: apple:first-of-type

答案: nth-of-type(even)

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

答案: apple:only-of-type

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

答案: bento:empty

答案: apple:not(small)

答案: [for]

答案: plate[for]

答案: [for=Vitaly]

答案: [for^="Sa"]

答案: [for$="ato"]

答案: [for*="obb"]

其实上面都正确

字母间距: letter-spacing: 20px(各个字母之间)

单词间距: word-spacing: 20px(各单词间距,中文各汉字间距)

行间距:line-height: 40px