常见的伪类有
动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus
目标伪类（target pseudo-classes）
:target
语言伪类（language pseudo-classes）
:lang( )
元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked
结构伪类（structural pseudo-classes）
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
否定伪类（negation pseudo-classes）
:not()
动态伪类
-
使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开）使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
记忆：女朋友看到LV包包后，ha ha大笑除了a元素，:hover、:active也能用在其他元素上
-
:focus指当前拥有输入焦点的元素（能接收键盘输入）
文本输入框一聚焦后，背景就会变红色
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active-
去除a元素默认的:focus效果
去除focus效果
或者将tabindex属性设置为-1
使用tabindex可以控制tab键选中元素的顺序，从1开始
tabindex设置为-1，代表禁止使用tab键选中
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
image.png
相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
目标伪类
-
当元素被锚点链接当作目标跳转之后起作用
目标伪类
语言伪类
-
语言是en系列（英语）的所有div元素
image.pngimage.png
元素状态伪类
:enabled 启用状态
:disabled 禁用状态
:checked 被选中状态
结构伪类
-
:nth-child(1)
是父元素中的第1个子元素
:nth-child -
:nth-child(2n)
n代表任意正整数和0
是父元素中的第偶数个子元素（第2、4、6、8......个）
跟:nth-child(even)同义
偶数展示 -
:nth-child(2n + 1)
n代表任意正整数和0
是父元素中的第奇数个子元素（第1、3、5、7......个）
跟:nth-child(odd)同义
奇数展示 -
:nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
image.png
:first-child，等同于:nth-child(1)
:last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child，是父元素中唯一的子元素
等同于:first-child:last-child或者:nth-child(1):nth-last-child(1)
:only-of-type，是父元素中唯一的这种类型的子元素
等同于:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)
:root，根元素，就是HTML元素
-
:empty代表里面完全空白的元素
image.pngimage.png -
否定伪类
-
:not()的格式是:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
image.pngimage.png
-
:not()支持简单选择器，不支持组合。比如下面的写法是不支持的
伪元素
常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
- 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
::first-line可以针对首行文本设置属性
- 只有下列属性可以应用在::first-line伪元素
字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height
::first-letter可以针对首字母设置属性
- 只有下列属性可以应用在::first-letter伪元素
字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
在content中，还可以使用attr(属性名)来获得元素的属性值
image.png
