概述

:active 选择器用于为在被激活时（例如，鼠标点击或触摸）的元素设置样式。它允许您创建动态和交互式的用户界面元素。

语法

-------------- -
  -- ---- --
-

其中：

• element 是要应用样式的 HTML 元素。

用法

:active 选择器通常用于以下目的：

• 为按钮、链接和表单控件等交互式元素提供视觉反馈。
• 创建悬停效果或状态变化。
• 增强无障碍性，通过提供视觉提示来帮助用户识别正在激活的元素。

示例

为按钮添加按下效果：

------------- -
  ----------------- --------
  ------ -----
-

为链接添加悬停效果：

-------- -
  ---------------- ----------
  ------ -----
-

为表单控件添加聚焦效果：

------------ -
  ------- --- ----- -----
-

注意

• :active 选择器只在元素被激活时生效，当元素失去焦点或不再被激活时，它将失效。
• :active 选择器具有较低的优先级，这意味着它可以被更具体的伪类选择器（例如，:hover）覆盖。
• 在某些情况下，:active 选择器可能无法如预期般工作，例如，当元素被禁用或不可交互时。

浏览器支持

:active 选择器得到了所有主要浏览器的支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

其他伪类选择器

除了 :active 之外，CSS 还提供了其他伪类选择器，用于在特定状态下为元素设置样式，包括：

• :hover：当鼠标悬停在元素上时
• :focus：当元素获得焦点时
• :visited：当链接被访问过时
• :checked：当复选框或单选按钮被选中时
• :disabled：当元素被禁用时

结论

:active 选择器是一个强大的工具，可以为您的 web 应用程序和网站创建动态和交互式的用户界面元素。通过理解其语法和用法，您可以增强用户体验并创建更美观、更易于使用的界面。