一、概念

伪类与伪元素都是用来修饰不在文档树中的部分，为其添加样式
伪类：用于已有的元素 「处于某个状态时」，一般使用单冒号表示
伪元素：用于创建一些 「不在文档树中」 的元素，一般用双冒号表示

二、伪类

1.关于链接

:link访问前，:hover鼠标滑过，:visited访问后，:active激活
如果要显示链接激活时的样式(:active)，必须将:active声明放到:link :hover后，因为激活时同时满足:link :hover : active三种状态
如果滑过的时候添加链接样式，需要将:hover放在:link后面
所以有LVHA这个顺序，防止样式覆盖

2.:nth-child与:nth-of-type

nth-child

🔔比如 .list li:nth-child(2)，选中父元素list的第二个子元素li标签，如果list的第二个子元素不是li标签，则选择符失效
如果前面没有写父元素标签，比如a:nth-child(1),会选择a的所有父元素的所有子元素其中的第一个看是否为a，如果没有父div则是body
🔔也可以用于选择偶数或奇数， nth-child(2n) / nth-child(2n+1) nth-child(even) / nth-child(odd)
🔔连续选中:nth-child(n+3)，第三个（从1开始算）之后的所有，或(-n+3)第三个及之前

nth-of-type

🔔会选中，父元素的所有子元素中第一个符合条件的。和:nth-child相比没有要求第一个子元素必须是什么

3.:is与:where

:is

:is(选择器列表)，可以设置不同元素下的某些元素的样式
在Vue等框架中使用:is()伪类，选择器就不会再增加随机属性选择器

:where

:where(选择器列表)
:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的

4.:not

:not()伪类也可以保护基本选择器不添加动态属性选择器

5.:has

:has()可以实现父选择器的功能,代表一个元素，其给定的选择器参数（相对于该元素的:scope)至少匹配一个元素

6.兄弟选择器

+表示选中相邻元素
～表示后端所有的兄弟元素

7.状态伪类:disabled、:empty、:required 等

三、伪元素

添加前缀/后缀

::before/::after来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中
创建 ::before和 ::after的元素时，必须要设置 content 属性，否则就不存在了

其他

::first-letter选中首字母，注意伪元素只作用于块状元素上面
::first-line选中首行
::placeholder选中表单元素的占位文本