伪类
交互状态
:hover鼠标在元素上悬停。
:active元素激活，比如按钮被按下。
:focus&:focus-within作用于可获取焦点的元素，比如按钮。
:focus-within允许后代元素的获取焦点。:target当前网页 URL 与 HTML 中的某个
id匹配时。
历史状态
:link带有href属性的元素。:visited访问过的链接。
可用的属性有：color background-color border-color outline-color 。
在同优先级下 :visited 可能会被 :link 覆盖。所以建议按照如下顺序定义这些伪类：
:link -> :visited -> :hover -> :active（简称 LVHA ）
表单状态
:disable&:enable元素（比如按钮）的禁用和可用状态。:checked用于选框。:indeterminate用于非决定的状态（元素的indeterminate属性）。:valid&:invalid<input type="email" required />input:invalid {
border-color: red;
}:required&:optional表单中有
required属性的元素可以用:required，非required元素则用:optional。:in-range用在一个有min和max的input元素。比如滑动条
元素位置
:first-child、:last-child、:only-child当自己作为父元素的第一个，最后一个，唯一一个子元素时。
:first-of-type、:last-of-type、only-of-type当自己作为父元素的第一个、最后一个、唯一一个某种类型的子元素时。
nth-child()和nth-of-type()可以用 odd、even 关键词，或者 An+B 表达式
:empty没有子元素
多类元素的选择
:is(...)多种元素的选择。
.post h2, .post li, .post img {
/* … */
}
/* 可以写为：*/
.post :is(h2, li, img) {
/* … */
}:not(...)排除指定元素类型。