一、什么是CSS伪类
CSS伪类是用于给某些特定的HTML元素设置样式规则的一种手段，它可以用于在某些特定情况下，为HTML元素添加一些特定的样式，从而实现更加精细化的页面样式设计。CSS伪类通常以冒号“:”的形式出现，被放置在CSS规则选择器的末尾。
举个例子，假如你想为页面上所有的超链接添加下划线效果，但当用户鼠标悬停在链接上时，下划线又消失了，这时你就可以使用CSS伪类来实现这个效果。
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
如上代码所示，我们在第一个CSS规则中为元素设置了下划线样式，当用户悬停在链接上时，第二个CSS规则会覆盖第一个规则的样式，将下划线效果去除。
二、CSS伪类的分类
CSS伪类可以分为以下两类：
1. 结构性伪类
结构性伪类是基于HTML文档结构的伪类，由于其与HTML文档的结构和语义相关，所以称为结构性伪类。这类伪类是指那些基于HTML元素在特定位置上或拥有特定结构关系的伪类，而非单纯基于元素语义。常用的结构性伪类有：
:first-child
选中元素的第一个子元素
li:first-child {
color: red;
}
:last-child
选中元素的最后一个子元素
li:last-child {
color: red;
}
:nth-child(n)
选中元素的第n个子元素，其中 n 为数字或表达式。
li:nth-child(2n) {
color: red;
}
:nth-last-child(n)
选中元素的倒数第n个子元素，其中 n 为数字或表达式。
li:nth-last-child(2n) {
color: red;
}
2. 功能性伪类
功能性伪类是基于HTML元素的状态或内容信息的伪类，这类伪类主要通过选中元素的属性值来实现对元素的样式设置，比如通过选中一个元素的鼠标悬浮行为，来实现给它设置不同的颜色等效果。常用的功能性伪类如下：
:hover
鼠标悬停在元素上时触发，可为元素设置样式
a:hover {
text-decoration: underline;
}
:active
元素被激活、按下鼠标的瞬间触发，可为元素设置样式
button:active {
background-color: gray;
}
:focus
元素获得焦点时触发，可为元素设置样式
input:focus {
border-color: blue;
}
三、CSS伪类的应用场景
CSS伪类的应用场景非常广泛，以下是常见的一些应用场景：
1. 超链接样式控制
通过CSS伪类，可以为超链接定义不同状态下的样式，比如鼠标悬停、激活等状态，让链接看起来更加美观和易于操作。
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
text-decoration: underline;
}
a:active {
color: red;
}
2. 表单样式控制
通过CSS伪类，可以为表单元素定义特定状态下的样式，比如当焦点在输入框内时，可以为其设置不同的颜色和边框样式，让用户知道当前输入框处于激活状态。
input:focus {
border-color: blue;
outline:none;
}
3. 列表项样式控制
通过CSS伪类，可以为列表项定义特定位置下或特定数量下的样式，比如某些页面需要为每四个列表项设置不同的背景颜色。
li:nth-child(4n) {
background-color: yellow;
}
4. 其他应用
CSS伪类还可以用于响应式设计、导航菜单等场景。
总结
CSS伪类是一种非常强大的样式控制手段，通过使用不同的伪类可以实现丰富多彩的页面效果，同时也能为用户带来更好的交互体验。掌握CSS伪类的使用方法，对于前端工程师来说非常重要。
