导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

CSS :active 伪类


实例

选择并设置活动链接的样式

a:active {
  background-color: yellow;
}
亲自试一试 »

更多“自己尝试”的例子见下文。


定义和用法

: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 声明;
}

更多实例

实例

当用户单击按钮时,选择并设置按钮的样式

button:active {
  background-color: pink;
}
亲自试一试 »

实例

单击时,选择并设置<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 伪类


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。