Loading...
墨滴

okkjoo

2021/08/26  阅读:37  主题:默认主题

极其富有趣味性地学习CSS选择器?

前面说点啥

最近粗略学完react全家桶,想回头复习一下CSS,发现了一个有意思的网站。

分享一个学习或联系CSS选择器的极具趣味的网站。目前是更新了 32 关卡,每关都能学到一个小知识点,从简单到逐渐复杂。非常适合初学者,能轻松愉快且快速地通过,完成之后想必也能留下深刻的印象。

官网CSS Diner


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


开玩

以下数字标题就是关卡数,如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"]

完成咯~

说在后面

如果你有不同的解法,欢迎留下你的解法~

如果对你有帮助,欢迎点个赞~

okkjoo

2021/08/26  阅读:37  主题:默认主题

作者介绍

okkjoo