We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

简介

:active CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTML元素。

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

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

示例

HTML

<body>
    <h1>:active CSS选择器示例</h1>
    <p>这个链接在鼠标按下和松开的这段时间内会变成绿色: <a href="#">Mozilla Developer Network</a>.</p>
</body>

CSS

body { background-color: #ffffc9 }
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */
 

规范

规范 状态 备注
Selectors Level 4
:active
Working Draft 无更改
Selectors Level 3
:active
Recommendation 无更改
CSS Level 2 (Revision 1)
:active
Recommendation 无更改
CSS Level 1
:active
Recommendation 首次定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support on the <a> element 1.0 1.0 (1.7 or earlier) 4.0 5.0 1.0
Support on any element 1.0 1.0 (1.7 or earlier) 8.0 7.0 ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support on the <a> element 1.0 1.0 (1.0) 6.0 6.0 1.0
Support on any element 1.0 1.0 (1.0) ? ? ? [1]

[1] Safari Mobile 默认不使用:active 状态,除非元素上或<body>上有一个touchstart 事件处理器。

参见

文档标签和贡献者

此页面的贡献者: fskuok, psychebb
最后编辑者: fskuok,