• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :active

    定义和用法

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

    语法:

    E:active{sRules}

    :activeCSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。: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="https://www.lanmper.cn/">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