css伪类选择器（可实现鼠标悬停变化等效果）

在CSS中，伪类选择器用于选取元素的某些特定状态或特殊位置上的样式。它是用于向某些选择器添加特殊效果和样式的一种CSS技术，常用于鼠标交互、表单控件状态等场景下。

伪类选择器的语法采用冒号:，并在选择器的后面指定其需要匹配的状态或位置，常见的伪类选择器如下：

1. :hover 伪类选择器，选择鼠标悬停在元素上的样式；
2. :active 伪类选择器，选择被激活的元素样式，比如鼠标点击；
3. :link 伪类选择器，选择未访问的链接样式；
4. :visited 伪类选择器，选择已访问的链接样式；
5. :focus 伪类选择器，选择拥有焦点的表单元素样式；
6. :nth-child() 伪类选择器，选择具有特定父元素的子元素；
7. :checked 伪类选择器，选择选中的表单元素；
8. :first-child 伪类选择器，选择某个父元素的第一个子元素；
9. :last-child 伪类选择器，选择某个父元素的最后一个子元素；
10. :not() 伪类选择器，排除选择器中指定的元素；
11. :nth-of-type() 伪类选择器，选择同一类型中的某个子元素。

以下是一些示例代码：

/* 选择鼠标悬停在链接上时的样式 */
a:hover {
  color: red;
}

/* 选择某个表单元素获得焦点时的样式 */
input:focus {
  border: 2px solid blue;
}

/* 选择具有特定父元素的第三个子元素 */
div:nth-child(3) {
  background-color: pink;
}

/* 选择同一类型中的最后一个子元素 */
span:last-of-type {
  font-weight: bold;
}

需要注意的是，不同的浏览器对伪类选择器的支持程度不同，同时也需要根据业务需求合理地选择适合自己的伪类选择器。

注意事项

在CSS中，:link、:visited、:hover和:active是链接伪类选择器，它们用于定义链接在不同状态下的样式。在使用这些伪类选择器时，通常要按照LVHA的顺序进行书写，即：

a:link { /* 未访问的链接样式 */ }
a:visited { /* 已访问的链接样式 */ }
a:hover { /* 鼠标悬停链接的样式 */ }
a:active { /* 鼠标点击链接的样式 */ }