:active

:active CSS 伪类 表示一个正在被用户激活的元素（例如按钮）。当使用鼠标时，“激活”通常从用户按下主鼠标按钮时开始。

试一试

:active 伪类通常用于 <a> 和 <button> 元素。此伪类的其他常见目标包括包含在激活元素中的元素，以及通过其关联的 <label> 被激活的表单元素。

由 :active 伪类定义的样式将被任何后续链接相关的伪类（:link、:hover 或 :visited）覆盖，这些伪类的特异性至少相等。为了适当地设置链接样式，请将 :active 规则放在所有其他链接相关规则之后，如LVHA 顺序中定义的那样：:link — :visited — :hover — :active。

注意：在具有多按钮鼠标的系统上，CSS 指定 :active 伪类只能应用于主按钮；在右手鼠标上，这通常是最左边的按钮。

语法

css
:active {
  /* ... */
}

示例

HTML

html
<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

CSS

css
/* Unvisited links */
a:link {
  color: blue;
}
/* Visited links */
a:visited {
  color: purple;
}
/* Hovered links */
a:hover {
  background: yellow;
}
/* Active links */
a:active {
  color: red;
}

/* Active paragraphs */
p:active {
  background: #eee;
}

结果

活动表单元素

HTML

html
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

CSS

css
form :active {
  color: red;
}

form button {
  background: white;
}

结果

规范

规范
HTML 标准
# selector-active
选择器级别 4
# the-active-pseudo

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅