CSS | :访问选择器

在 CSS 中，可以使用选择器来选择要应用样式的 HTML 元素。除了常见的选择器（如元素选择器和类选择器），CSS 还提供了“访问选择器”或“伪类选择器”，用于根据元素的状态或位置来选择元素。

基本语法

访问选择器以冒号（:）开头，后跟选择器名称。例如，:hover、:active 和 :focus 都是访问选择器。

以下是一个简单的样例，其中 :hover 用于当用户将鼠标指针悬停在按钮上时修改按钮的背景颜色：

button:hover {
  background-color: green;
}

常见的访问选择器

:hover

:hover 用于当用户将鼠标指针悬停在元素上时应用样式。这是一个常见的用法，可以为按钮、链接等元素添加特效。

a:hover {
  color: red;
}

:active

:active 用于当用户点击元素并按住鼠标键时应用样式。通常用于按钮、链接、单选框和复选框等元素。

button:active {
  background-color: blue;
}

:focus

:focus 用于当元素获得焦点时应用样式。通常用于表单元素（例如 input 和 textarea）以及链接。

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

:visited

:visited 用于选择已访问的链接。使用此选择器时需要注意一些安全性问题，因为它可以泄露用户的浏览历史记录。

a:visited {
  color: purple;
}

:nth-child

:nth-child 用于选择元素的第 N 个子元素。可以使用简单的表达式（如 :nth-child(2)）或更复杂的表达式（如 :nth-child(2n+1)）。

以下样例选择表格中的奇数行：

tr:nth-child(2n+1) {
  background-color: lightgray;
}

总结

CSS 的访问选择器为我们提供了一些将样式应用于具有特定状态或位置的元素的有用工具。它们支持的功能非常强大，可以创建出令人惊叹的效果。同时使用时也需要注意一些安全性问题，避免恶意使用带来的不良后果。