CSS | 伪类

在 CSS 中，伪类是指可以向元素添加特殊状态或行为的选择器，它们可以用来实现一些动态的效果。以下是常用的伪类：

:hover

:hover 表示鼠标悬停在选定元素上时的状态。当鼠标移动到元素上方时，可以通过设置其属性来改变元素的样式，例如：

a:hover {
  color: blue;
}

这段代码表示当鼠标悬停在 a 标签上时，将字体颜色改为蓝色。

:active

:active 表示元素正在被激活。当用户点击鼠标上的某个按钮或按下键盘上的某个键时，元素的状态会改变为 active。例如：

button:active {
  background-color: red;
}

这段代码表示当用户点击 button 按钮时，将按钮的背景颜色改为红色。

:focus

:focus 表示元素获得焦点。默认情况下，鼠标单击或键盘移动到元素上时，该元素不会获得焦点。但是，可以通过指定 tabindex 属性来使元素获得焦点。例如：

<input type="text" tabindex="1" />

input:focus {
  outline: none; /* 去掉默认的聚焦前的虚线框 */
  border: 2px solid blue;
}

这段代码表示当 input 元素获得焦点时，将边框改为蓝色。

:first-child

:first-child 表示选中元素的第一个子元素。例如：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

li:first-child {
  color: red;
}

这段代码表示将第一个 li 元素的字体颜色改为红色。

:last-child

:last-child 表示选中元素的最后一个子元素。例如：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

li:last-child {
  color: blue;
}

这段代码表示将最后一个 li 元素的字体颜色改为蓝色。

:nth-child

:nth-child 表示选中元素的第 n 个子元素。其中 n 可以是具体数字、关键字（例如 even、odd，表示偶数或奇数），也可以是公式（例如 3n+1，表示选中 4、7、10...）。例如：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>

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

这段代码表示将偶数个 li 元素的字体颜色改为红色。

:checked

:checked 表示选中的表单元素（例如 radio 或 checkbox）。它只对以下元素有效：<input type="radio">、<input type="checkbox">、<option>。例如：

<input type="checkbox" id="checkbox" />

<label for="checkbox">选中我</label>

#checkbox:checked + label {
  color: red;
}

这段代码表示当 checkbox 元素被选中时，将 label 元素的字体颜色改为红色。

以上是常用的伪类，它们可以使页面变得更加生动及实用。