:active

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

:active 伪选择器在链接被激活(被点击或以其他方式激活)时更改其外观。 它通常只显示几分之一秒,并提供元素确实被点击的视觉反馈。 它最常用于锚链接 (<a href="#"></a>)。

例如,以下 CSS 将使锚链接在活动状态下向下移动一个像素(给人一种在三维空间中被推入的感觉)

:active 也可以应用于任何元素。 在下面的 Pen 中,点击页面上的任何位置都会使整个页面变为黄色

最佳做法是涵盖所有“状态”,特别是链接。 一个简单的方法是“LOVE HATE”或

  • L :link
  • O
  • V :visited
  • E
  • H :hover
  • A :active
  • T
  • E

以这种顺序进行是理想的。

a:link { /* Essentially means a[href], or that the link actually goes somewhere */
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: green;
}
a:active {
  color: red;
}

否则,假设您将 :visited 样式列在最后,如果该链接已被访问,它将 覆盖 :active:hover 声明,并且链接将始终为紫色,无论您是否悬停或链接是否处于活动状态(不理想)。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
所有所有所有所有所有所有
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
所有所有所有所有所有
来源:caniuse