前面说点啥
最近粗略学完react全家桶，想回头复习一下CSS，发现了一个有意思的网站。
分享一个学习或练习CSS选择器的极具趣味的网站与我自己做的解法。目前是更新了 32 关卡，每关都能学到一个小知识点，从简单到逐渐复杂。非常适合初学者，能轻松愉快且快速地通过，完成之后想必也能留下深刻的印象。
刚开始玩时还没明白他这啥意思，结果发现之后才知道自己有多呆。如果你一开始也不知道怎么玩，那看了第一个答案肯定就明白了~
开玩
以下数字标题就是关卡数，如1就代表第一关；注意网站上的右侧是有一些相关提示的，也许你发现写的方法与我不同也能通过，但是也要练习一开始没想到的方法，这正是该学习网站的目的。——欢迎留下你的解法~
1
标签名字做选择器——输入plate后enter即可通过。刚开始一直想换行，结果咋都换不了行，最后发现——压根不需要换行。
plate
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"]
完成咯~
后面说点啥
如果你有不同的解法，欢迎留下你的解法~
如果对你有帮助，欢迎点个赞~
推荐阅读
以下三个是关于学习 CSS选择器、Flex、Grid 极其富有趣味性的学习网站，这篇文章就是第一个网站的解答与分享。
