:active

定义和用法

  • :active ，匹配激活元素。当你点击一个链接时它变成活动链接。最常见的示例是单击HTML文档中的超链接：当按住鼠标按钮时，链接处于活动状态。
  • :active ，是一个伪类选择器，它适用于被激活的元素。 :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式, :hover 选择器当有鼠标悬停在其上的链接样式。
  • 为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！

语法:

E :active{ sRules }

:active CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配 tab 键交互。通常用于但并不限于 <a> 和 <button> HTML元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link ， :hover 和 :visited 。为了正常加上样式，需要把 :active 的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为 LVHA顺序 : :link — :visited — :hover — :active。

注意: 在有多键鼠标的系统中，CSS 3 规定 :active 伪类必须只匹配主按键；对于右手操作鼠标来说就是左键。
  • 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问。这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
  • 超链接的4种状态，需要有特定的书写顺序才能生效。 超链接状态顺序: ： :link 、 :visited 、 :hover 、 :active 。 注意 ， :hover 必须位于 :link 和 :visited 之后， :active 必须位于 :hover 之后

浏览器支持

对所有元素IE8以及新版本浏览器均支持 :active 选择器。 :active 选择器对于IE7只支持链接。

示例 

//选择激活的链接样式：

a:active
{
  background-color:yellow;
}


//HTML

<body>
 <h1>:active css选择器示例</h1>
 <p>这个链接在鼠标按下和松开的这段时间内会变成绿色: <a href="./">CSS3</a>.</p>
</body>


//CSS

body { background-color: #ffffc9 }

a:link { color: blue }
 /* 未访问链接 */

a:visited { color: purple }
 /* 已访问链接 */

a:hover { font-weight: bold }
 /* 用户鼠标悬停 */

a:active { color: lime }
 /* 激活链接 */

上篇： :hover