跳到主要内容位置

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