伪类（pseudo classes)允许你根据元素的状态动态的设置样式。这意味着，你的设计可以根据用户的操作发生动态的变化。
本节内容比较多，你不需要完全记住所有的伪类，只需要知道伪类的作用和一些常用伪类即可，用到的时候，可以来这里再回忆一下。
假设需要在页面上添加一个邮箱输入框，当用户输入无效格式的邮箱字符串时，输入框会出现一个红色的边框，你要如何实现这个功能呢？CSS提供了:invalid伪类，恰好满足我们的需求。
当邮箱账号格式正确时，显示绿色的边框，格式不正确时，显示红色的边框。这种设计可以起到提示的作用。
例子中的:invalid和:valid就是伪类。与伪元素写法有点类似，但是伪类用单冒号表示。
下面是一些与用户操作引发元素状态改变有关的伪类。
:hover当鼠标悬浮在某个元素上面时，元素的hover状态被激活，你可以用:hover更改此时元素的样式。
:active当元素正在处于与用户交互的操作时，此时该元素处于激活状态，例如用户点击了该元素，该元素在点击的过程中处于激活状态。可以用:active更改这个状态下的元素样式。
:focus、:focus-within和:focus-visible通过:focus可以更改focusable元素（例如button）获得焦点时的样式。
如果一个元素的子元素获得焦点，可以通过:focus-within更改该元素此时的样式。
关于:focus-visible这里有详细解释。它的作用是可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发。
例如下面的例子，我们希望去除鼠标点击时候的outline轮廓，而保留键盘访问时候的outline轮廓。
:target当url中锚片段匹配某个元素的id时，可以用:target更改此时元素的样式。通常用这个标志页面跳转的区域。
:link如果一个拥有href属性的<a>元素还没有访问过（被用户点击），可以使用:link更改它的样式。
也可以使用:visited更改已访问过得<a>元素的样式。
在某些浏览器中，如果你定义了一个:visited样式，它可能会被后面定义的:link样式覆盖，所以建议按照如下顺序定义伪类样式。
a:link {}
a:visited {}
a:hover {}
a:active {}:disabled和:enabled:disabled和:enabled用于设置表单元素（例如button）是否禁用时的样式，表单元素默认是enabled，所以我们一般很少用:enabled设置元素的样式。
:checked and :indeterminate:checked用于指示某些可以被用户点击选中的表单元素，例如checkbox和radioButton。
checkbox元素除了拥有选中和被选中两种状态，还有一种状态为indeterminate，需要通过js激活该状态：
inputCheckbox.indeterminate = true;可以使用:indeterminate设置该状态下的样式。
:placeholder-shown如果某个表单元素设置了placeholder属性，那么当placeholder显示的时候，可以用:placeholder-shown设置该状态下的样式。
正如文章开始的例子那样，可以使用:valid、:invalid和in-range根据表单元素的验证状态，动态的更改样式。
:in-range主要是针对，设置了min和max属性的<input>元素。例如<input type=number min=1 max=5 />，使用下面的css代码，当用户输入数字范围不在1~5范围间时，输入框背景色为红色。
input {
background: red;
}
input:in-range {
background: white;
}:first-child和:last-child:first-child和:last-child用于选中一组元素内同级的第一个和最后一个元素。
only-childonly-child用于选中没有兄弟元素的元素。
:first-of-type和:last-of-type:first-of-type和:last-of-type与:first-child和:last-child类似，也是选中第一个和最后一个元素，但是范围不一样，它不限于元素在一个组内，不要求元素是兄弟节点。
nth-child和nth-of-typenth-child和nth-of-type是前面内容的扩充，用于选中第n个元素。
你还可以使用nth-child(even)选中所有奇数位元素。
甚至更复杂的形式，选中3n+3位置的元素。
li:nth-child(3n+3) {
background: yellow;
}only-of-typeonly-of-type与only-child元素类似，区别是only-child选中的是一组内唯一子元素，而only-of-type选中的是一组内唯一类型的子元素。
:empty当某个元素没有子元素时，我们认为它是一个空元素。可以使用:empty设置空元素的样式。
注意空元素，标签内部没有空格。
<div></div>
<div>
</div>第二个<div>元素不是一个空元素，所以:empty对其无效果。
:is()如果你想要指示类名为.post元素下h2、li子元素，可以这样写:
.post :is(h2, li) {
}等价的写法：
.post h2,.post li {
}:not()可以使用:not()排除某些元素。例如选中所有没有类名（class属性）的链接。
a:not([class]) {
}选中所有没有alt属性的图片。
img:not([alt]) {
}（完）