CSS 伪类（Pseudo-classes）

CSS 伪类是用于向特定元素添加特定状态样式的选择器。它们不是真正的元素，而是当满足某些条件时，可匹配选择器的特定状态。

基本伪类

基本伪类用于选择元素的基本状态，例如 hover、active 等。

:hover

:hover 伪类选择器会在用户将鼠标悬停在 HTML 元素上时应用某些样式。例如：

a:hover{
  color: red;
}

:active

:active 伪类选择器会在用户激活 HTML 元素时（通常是鼠标单击）应用样式。例如：

button:active{
  background-color: blue;
}

:focus

:focus 伪类选择器用于选择当前聚焦的元素。例如：

input:focus{
  border: 2px solid green;
}

链接伪类

链接伪类用于选择链接的不同状态，例如未访问、已访问、悬浮等。

:link

:link 伪类选择器用于选择所有未被访问过的链接。例如：

a:link{
  color: blue;
}

:visited

:visited 伪类选择器用于选择所有已经访问过的链接。由于安全原因，限制了对 :visited 选择器的访问，例如不能访问链接的历史记录。例如：

a:visited{
  color: purple;
}

:hover

:hover 伪类选择器（见前面的基本伪类）也可以用于选择链接悬停状态。

:active

:active 伪类选择器（也见前面的基本伪类）同样也可以用于选择链接活动状态。

子元素伪类

子元素伪类可用于选择元素的某些子元素，例如第一个子元素、最后一个子元素、偶数子元素等。

:first-child

:first-child 伪类选择器用于选择是其父元素的第一个子元素的元素。例如：

li:first-child{
  color: red;
}

:last-child

:last-child 伪类选择器用于选择是其父元素的最后一个子元素的元素。例如：

li:last-child{
  color: blue;
}

:nth-child(n)

:nth-child(n) 伪类选择器用于选择属于其父元素的第 n 个子元素的元素。例如：

li:nth-child(2){
  color: red;
}

在上面的例子中，将选择第二个列表项。

此外，还可以使用 even 和 odd 来选择偶数子元素和奇数子元素，例如：

li:nth-child(even){
  background-color: gray;
}

li:nth-child(odd){
  background-color: lightgray;
}

结语

这就是 CSS 伪类的基础知识，它们允许您为不同的元素状态应用不同的样式。深入了解 CSS 更多高级话题，请继续学习！