:active

简介

: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 首次定义

浏览器兼容性

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,