:active 伪类用于选择和设置活动链接或者任何其他元素的样式。
它由用户激活。
当用户单击链接或者元素并按下鼠标按钮时,元素变为活动状态。
:active 伪类用于 <a> 和 <button> 元素。
该伪类还针对包含激活元素的元素,以及通过 <label> 元素激活的表单元素。
:link、:hover 或者 :visited 伪类覆盖了 :active 伪类指定的样式定义。
为了适当地设置链接样式,:active 规则必须放在所有其他与链接相关的规则之后(:link、:visited、:hover、:active)。
在具有多按钮鼠标的系统上,CSS3 定义 :active 选择器应仅应用于第一个按钮。
但是在惯用右手的鼠标上,它应该应用于最左边的按钮。
语法
:active { css declarations; }
:active 伪类示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> a:active { background-color: #8ebf42; color: #666; } </style> </head> <body> <h2>:active selector example</h2> <a href="https://www.onitroad.com/">onitroad.com</a> </body> </html>
带有 <a> 标签的 :active 伪类示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> a { color: #1c87c9; } a:active { background-color: #8ebf42; color: #eee; } </style> </head> <body> <h2>:active selector example</h2> <p>:active 伪类用于选择和设置活动链接或者任何其他元素的样式。它由用户激活。 <a href="#">链接被点击后变成active状态</a> 我们可以尝试点击<a href="#">链接</a>查看颜色的变化 </p> </body> </html>
在以下示例中,单击文本以查看颜色如何变化。
带有 <div> 标签的 :active 伪类示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { padding: 30px; background-color: #8ebf42; color: #eee; } div:active { background-color: #666; color: #fff; } </style> </head> <body> <h2>:active selector example</h2> <div> Lorem ipsum is simply dummy text... </div> </body> </html>
日期:2020-06-02 22:14:14 来源:oir作者:oir