--- title: ':active' slug: 'Web/CSS/:active' tags: - CSS - Layout - Web - 伪类 - 参考 - 布局 translation_of: 'Web/CSS/:active' ---
{{CSSRef}}

CSS :active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

:active 伪类一般被用在 {{HTMLElement("a")}} 和 {{HTMLElement("button")}} 元素中. 这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的{{HTMLElement("label")}}标签被激活的表格元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 {{cssxref(":link")}}，{{cssxref(":hover")}} 和 {{cssxref(":visited")}}。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。

注意: 在有多键鼠标的系统中，CSS 3 规定 :active 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。

语法

{{csssyntax}}

示例

激活链接

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

a:link { color: blue; }          /* 未访问链接 */
a:visited { color: purple; }     /* 已访问链接 */
a:hover { background: yellow; }  /* 用户鼠标悬停 */
a:active { color: red; }         /* 激活链接 */

p:active { background: #eee; }   /* 激活段落 */

结果

{{EmbedLiveSample('Active_links')}}

激活表单元素

HTML

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

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

结果

{{EmbedLiveSample('Active_form_elements')}}

规范

规范 状态 备注
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} {{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} {{Spec2('CSS4 Selectors')}} 无更改。
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} {{Spec2('CSS3 Selectors')}} 无更改。
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} {{Spec2('CSS2.1')}} 无更改。
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}} {{Spec2('CSS1')}} 首次定义。

浏览器兼容性

{{Compat("css.selectors.active")}}

参见