CSS Diner详解

详细CSS Diner

CSS Diner想必很多人听过，这是一个练习CSS中的选择器的不错的网站，最近在学习前端，打算好好写一下

常用英文单词：

• plates：盘子
• bento：盒饭、便当
• pickle：腌黄瓜

1. 选择盘子，类型选择器，答案：plate

第一题右边的提示是类别选择器，选择plate则会把所有plate选中(好像说了句废话)。这里强调一点，题目的plate并不是HTML/CSS的标签之类的，只是题目需要

1. 第一题的类似，答案是bento

1. ID选择器，右边有例子，答案是#fancy

1. 后代选择器，答案是plate>apple或者plate apple

1. 将后代选择器与ID选择器结合，答案是#fancy pickle

1. class选择器，答案是.small

1. 将类别选择器与元素选择器结合，要注意如果有元素选择器，则需将元素选择器放在前面。答案是orange.small

1. 还是类别选择器与元素选择器结合，答案是bento orange.small

1. 并集，答案是plate，bento

1. 通配，答案是*

1. 通配的应用

1. 兄弟选择器，答案是plate + apple

1. 也是兄弟选择器，答案是bento ~ pickle

两种兄弟选择器：

• +表示只要一个
• ~表示全都要

两种后代选择器：

• 空格表示只要是后代都行
• >表示只要第一个

1. 后代选择器，答案是pickle > apple

1. 伪类选择器，选择第几个后代，答案是orange:first-child

注意这题的答案不能是plate:first-child，因为首先要选中该类，然后再是该类的限制

1. 唯一子元素，答案是apple:only-child,plate>pickle

这题我的答案比较简单，网上有更好的答案：plate>:only-child

1. 尾元素，答案是apple:last-child,pickle:last-child

1. 第几个子元素，答案是plate:nth-child(3)

1. 倒数第几个元素，答案是bento:nth-last-child(3)

1. 同样是子元素，换成了类型，这里与first-child区别开来，因为这里并不要紧接着父元素，答案是apple:first-of-type

1. 还是子类伪元素，现在变成了偶数次，答案是plate:nth-of-type(2n)

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

1. 唯一，答案是apple:only-of-type

1. 最后一种类型，答案是orange:last-of-type,apple:last-of-type

1. 取空，答案是bento:empty

1. 取非，答案是apple:not(.small)

1. 属性值，答案是[for]

1. 属性值搭配元素，答案是plate[for]

1. 具体属性值，答案是for="Vitaly"

1. 匹配前缀，答案是[for^="Sa"]

1. 匹配后缀，答案是[for$="to"]

1. 匹配中间部分，答案是[for*="obb"]