简介
: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 事件处理器。