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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:activeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Non-a element supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1
Notes
Full support 1
Notes
Notes By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.
Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

相关链接