CSS 伪类

在 CSS 中，伪类是用来给 CSS 规则增加一些特殊的效果的关键字，它们可以描述当前 HTML 元素的某个状态或行为，例如一个链接被访问过的状态，或者一个表单元素是否被鼠标悬停。在本文中，我们将会介绍 CSS 中的几个常用的伪类。

:hover

:hover 伪类可以让我们在鼠标悬停在一个元素上的时候改变这个元素的样式。例如下面这个例子，当鼠标悬停在按钮上的时候，按钮的背景色会变成黄色：

button:hover {
  background-color: yellow;
}

:active

:active 伪类描述当前被点击的元素的状态。这个伪类通常用来为按钮添加点击效果。例如下面这个例子，当一个按钮被点击的时候，按钮的背景色会变成蓝色：

button:active {
  background-color: blue;
}

:visited

:visited 伪类可以用来描述一个链接已经被用户点击过的状态。但是由于安全原因，浏览器并不允许您修改已经访问的链接的样式。通常情况下，您可以用 :visited 来设置链接被点击后的样式。例如下面这个例子，当一个链接被点击后，链接的颜色会变成灰色：

a:visited {
  color: gray;
}

:focus

:focus 伪类描述当前获得焦点的元素的状态。这个伪类通常用来为表单元素添加样式。例如下面这个例子，当一个输入框获取焦点后，输入框会变成黄色：

input:focus {
  background-color: yellow;
}

:nth-child()

:nth-child() 伪类可以让我们选择在父元素中的第 n 个子元素，并对其设置样式。这个伪类可以接受一个公式作为参数，公式中可以包含 n，例如 2n+1，这个公式描述的是奇数元素。例如下面这个例子，我们选择父元素中的第 2 个子元素，也就是编号为 2 的元素，并修改其背景色为蓝色：

parent :nth-child(2) {
  background-color: blue;
}

总结

本文介绍了 CSS 中的几个常用的伪类，分别是 :hover、:active、:visited、:focus、:nth-child()。这些伪类可以帮助我们描述当前 HTML 元素的状态或行为，并为其设置样式。在编写 CSS 样式时，请合理使用这些伪类，可以让网页看起来更加美观和功能更强大。