CSS | :选中选择器

简介

在 CSS 中，:选中选择器指的是一类伪类选择器，用于选中元素在特定状态下的样式。这些状态可以是用户行为、元素内容或某些属性值的变化。

这些伪类选择器的语法是在选择器名称前加上一个冒号( : )，如 :hover、“:active”、:checked、:focus 等。

使用方法

伪类选择器可以应用于任何 CSS 选择器，如 ID、类、属性、伪类、伪元素等。

以下是一些常用的伪类选择器：

:hover

:hover 伪类选择器在用户将鼠标指针悬停在元素上时启用样式。

示例代码：

a:hover {
  background-color: yellow;
}

:active

:active 伪类选择器在用户点击和按住鼠标按键时启用样式。

示例代码：

a:active {
  color: red;
}

:focus

:focus 伪类选择器在元素获取焦点时启用样式，例如通过 Tab 键或单击元素。

示例代码：

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

:visited

:visited 伪类选择器应用于已被访问过的链接，可以用于改变访问过链接的颜色等样式。

示例代码：

a:visited {
  color: purple;
}

:nth-child()

:nth-child() 伪类选择器按照它们在它们的父元素中的位置选取元素。

示例代码：

li:nth-child(3) {
  background-color: yellow;
}

:nth-of-type()

:nth-of-type() 伪类选择器按照它们在它们的父元素中同类型元素的位置选取元素。

示例代码：

p:nth-of-type(odd) {
  background-color: lightblue;
}

:not()

:not() 伪类选择器用于选择不匹配给定选择器的元素。

示例代码：

input:not(:focus) {
  opacity: 0.5;
}

总结

伪类选择器是 CSS 中强大的工具之一，可以让开发者轻松管理不同状态下的样式。通过选择适当的伪类选择器并与其他选择器组合使用，可以创建出令人印象深刻的 Web 界面并实现强大的交互效果。