此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
:active
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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 |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.