: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