CSS :active 伪类
下面还有更多“亲自试一试”的示例。
定义和用法
:active
伪类用于选择并设置用户正在激活的元素的样式。
:active
伪类最常用于 <a> 和 <button> 元素。当用户点击链接时,链接会变为活动状态,按钮也是如此。
提示:使用 :link 为未访问页面的链接设置样式,使用 :visited 为已访问页面的链接设置样式,使用 :hover 为鼠标悬停在链接上时设置样式。
注意:为了使 :active
生效,它**必须**放在 CSS 定义中的 :hover
(如果存在)之后!
版本 | CSS1 |
---|
浏览器支持
表中的数字指定了完全支持此伪类的第一个浏览器版本。
伪类 | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS 语法
:active {
css 声明;
}
更多示例
示例
当您点击 <p>、<h1> 和 <a> 元素时选择并设置其样式
p:active, h1:active, a:active {
background-color: yellow;
}
亲自试一试 »
示例
选择并设置未访问、已访问、悬停和活动链接的样式
/* 未访问的链接 */
a:link {
color: green;
}
/* 已访问的链接 */
a:visited {
color: green;
}
/* 鼠标悬停在链接上 */
a:hover {
color: red;
}
/* 选中的链接 */
a:active {
color: yellow;
}
亲自试一试 »
示例
使用不同的样式设置链接样式
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
亲自试一试 »
相关页面
CSS 教程:CSS 链接
CSS 教程:CSS 按钮
CSS 教程:CSS 伪类