前面说点啥

最近粗略学完react全家桶，想回头复习一下CSS，发现了一个有意思的网站。
分享一个学习或联系CSS选择器的极具趣味的网站。目前是更新了 32 关卡，每关都能学到一个小知识点，从简单到逐渐复杂。非常适合初学者，能轻松愉快且快速地通过，完成之后想必也能留下深刻的印象。
官网CSS Diner

刚开始玩时还没明白他这啥意思，结果发现之后才知道自己有多呆。如果你一开始也不知道怎么玩，那看了第一个答案肯定就明白了…

开玩

以下数字标题就是关卡数，如1就代表第一关；注意网站上的右侧是有一些相关提示的，也许你发现写的方法与我不同也能通过，但是也要练习一开始没想到的方法，这正是该学习网站的目的。——欢迎留下你的解法~

1

标签名字做选择器——输入plate后enter即可通过。刚开始一直想换行，结果咋都换不了行，最后发现——压根不需要换行。

2

同理 ：bento

3

用上id：#fancy

4

子代选择：
plate apple

5

id+子元素：
#fancy pickle

6

class：
.small

7

兄弟：
orange.small

8

把前面的混一块考察了一下：
bento orange.small

9

同时选择多个：
plate,bento

10

伪类：
*

11

混合考察：
plate *

12

+：
plate+apple

13

bento~pickle

14

直接子元素：
plate>apple

15

直接的第一个子元素：
plate orange:first

16

混合考察：
apple,plate pickle

17

apple.small,pickle
这里我还发现如果选取多个时，选了一个另一个没选，是选到了那个抖动而不是整个输入框抖动，有意思。

18

选第几个:
plate:nth-child(3)

19

注意括号里的数字是全部兄弟标签的排序
bento:nth-child(2)
你也可以倒着数
bento:nth-last-child(4)

20

同理：
apple:nth-child(2)
或者用type：
apple:first-of-type

21

type取偶数：
plate:nth-of-type(2n)

22

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

23

在另一个元素中选择其类型的唯一元素：
apple:only-of-type

24

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

25

:empty 伪类：
bento:empty

26

not：
apple:not(.small)

27

A[attribute]
*[for]

28

同上：
plate[for]

29

限制属性值：
bento[for="Vitaly"]

30

限制属性值前缀：
*[for^="Sa"]

31

限制属性值后缀：
*[for$="ato"]

32

属性值中包含：
bento[for*="obb"]

完成咯~