:active
:active
:active伪类表示由用户激活的元素(如按钮)。使用鼠标时,“激活”通常在按下鼠标按钮时开始,在释放鼠标时结束。:active伪类通常用于<a>和<button>等元素,但是也可以在其它元素中使用。
/* Selects any <a> that is being activated */
a:active {
color: red;
}
由:active
伪类定义的样式会被后续中任何与链接相关的,至少具有等于特异性的伪类(如:link
,:hover
或:visited
)所覆盖。要想适当地设置链接的样式,需要将:active
规则放在其他所有与该链接相关的规则之后,如LVHA-order
所定义的那样
::link
- :visited
- :hover
- :active
。
注:
在具有多按钮鼠标的系统上,CSS 3指定:active
伪类只能应用于主按钮;在右手鼠标上,这通常是最左边的按钮。
语法
:active
实例
HTML
<a href="#">This link will turn lime while you click on it.</a>
CSS
a:link { color: blue } /* Unvisited links */
a:visited { color: purple } /* Visited links */
a:hover { font-weight: bold } /* User hovers */
a:active { color: lime } /* Active links */
结果
规范
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of ':active' in that specification. | Living Standard | |
Selectors Level 4The definition of ':active' in that specification. | Working Draft | No change. |
Selectors Level 3The definition of ':active' in that specification. | Recommendation | No change. |
CSS Level 2 (Revision 1)The definition of ':active' in that specification. | Recommendation | No change. |
CSS Level 1The definition of ':active' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 5.0 | 1.0 |
Support on non-<a> elements | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.0) | 6.0 | 6.0 | 1.0 |
Support on non-<a> elements | 1.0 | (Yes) | 1.0 (1.0) | ? | ? | (Yes) 1 |