:active

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

:active 伪类一般被用在 <a><button> 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素,以及可以通过他们关联的<label>标签被激活的表格元素。

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

备注: 在有多键鼠标的系统中,CSS 3 规定 :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
a:link {
  /* 未访问链接 */
  color: blue;
}
a:visited {
  /* 已访问链接 */
  color: purple;
}
a:hover {
  /* 用户鼠标悬停 */
  background: yellow;
}
a:active {
  /* 激活链接 */
  color: red;
}

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;
}

结果

规范

Specification
HTML
# selector-active
Selectors Level 4
# active-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:active
Non-a element support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见