CSS 用户行为伪类选择器

CSS伪类选择器可以在普通选择器的基础上，选择 HTML 元素的某种状态，例如按钮点击之后，Input 输入框获得焦点的时候，或者链接访问之后，给它设置相应的样式。CSS 伪类选择器种类繁多，因为不同的 HTML 元素有不同的状态，这里只介绍一部分常用的，剩余的会在后面章节中用到的时候再介绍，你也可以先略过 CSS伪类选择器小节，待用到的时候再来查看。

本小节先介绍和用户行为有关的 CSS伪类选择器，它们有：

• :hover 伪类选择器，用于选择鼠标悬停在元素上的时候的元素。
• :active 伪类选择器，用于选择鼠标按下并移动到元素上的时候的元素。
• :focus 伪类选择器，用于选择获得焦点的元素。
• :focus-within 伪类选择器，用于选择获得焦点的元素，或者有子元素获得焦点的元素。

使用 CSS伪类选择器的语法是，直接在选择器后面加上伪类选择器，例如下方代码所示：

/* id选择器 */
#id:hover {}
/* class选择器 */
.class:active
/* 标签选择器 */
a:hover
/* 或其它选择器 */

接下来分别看一下它们的用法。

:hover

当鼠标滑过 HTML 元素时，这些元素会有 :hover 状态，我们可以对这种状态的元素设置样式，例如，让它们改变颜色。假设我们有一个超链接元素，在鼠标移上去的时候，设置它的文本为红色，在鼠标移开的时候，恢复为默认样式，代码如下：

<style>
  a:hover {
    color: red;
  }
</style>
<a href="#">超链接</a>

预览：

现在鼠标移上去试试，超链接的文本，是不是就变成了红色？绝大多数的 HTML 元素都有 :hover 状态，你可以试试其它的元素。

:active

当在 HTML 元素上按下鼠标，并保持不松开，这时，元素就有了:active 状态，例如我们有一个按钮，当用户点击鼠标时，把它放大 1.2 倍，代码如下：

<style>
  .btn:active {
    transform: scale(1.2);
  }
</style>
<button class="btn">按钮</button>

预览：

现在在按钮上点击鼠标并保持不松开，是不是发现按钮就变得更大了？同样的，其它 HTML 元素也有 :active 状态。

:focus

:focus 主要用于 HTML 表单元素中，例如输入框，当它获得焦点时，也就是用户在输入框中点击，并有光标提示输入的时候，这个元素就有了:focus 状态，例如当一个输入框获得焦点时，给它边框设置为蓝色，代码如下：

<style>
  input:focus {
    border: 1px solid hsl(214deg, 100%, 60%);
  }
</style>
<input type="text" />

预览：

这时点击输入框，就发现边框变成了蓝色。

:focus-within

:focus-within 除了可以选择获得焦点的元素外，当它的子元素获得焦点时，也可以选择它。例如，把一组输入框放到 <form> 表单元素下，当其中任何一个输入框获得焦点时，都把 form 的边框设置为蓝色，代码如下：

<style>
  form:focus-within {
    border: 1px solid hsl(214deg, 100%, 60%);
  }
</style>
<form>
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>

预览：

这时，如果点击任何一个输入框，表单元素的边框都会变成蓝色。

小结

CSS 用户行为伪类选择器，可以选择用户操作 HTML 元素时的一些状态，例如鼠标滑过、点击并按住、点击输入框的时候等，这些是最常用的伪类选择器，因为页面的主要作用就是和用户进行交互，在用户执行某些操作之后，给予适当的反馈，才能带来更好的用户体验。