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