Active的一段话

 active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。

Active的特点

其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。

nbsp;html>                      a{        display:block;        width:30px;        margin:20px;        border-radius:8px;        padding:20px 50px;        text-align:center;        background:green;      }      a:active{        background:indigo;      }              link  

登录后复制

我们可以通过过渡属性（transition）来调整这个时间。

      a:active{        background:indigo;        transition:3s;      }

登录后复制

读者可以做一个实验，改变其中transition的值，然后测试:avtive选择器所花费的时间。

ACTIVE示例

nbsp;html>                      p      {        width:100px;        height:100px;        background:red;        transition: 5s;       }        p:active       {        width:300px;        height:300px;        transition:3s;        }            
  

登录后复制

这里面有两个transition，也就是意味着有两个过渡。

第一个过渡是激活active选择器，这时候 p:avtive 里的 transition 起作用。

第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 p 里的 transition 起作用。

立即学习“前端免费学习笔记（深入）”；

如果读者只设置了在 p 里面的 transition ，那么选择器的过渡时间也就默认为 p 里的 transition 了。

以上就是CSS :active选择器的实例代码详解的详细内容，更多请关注【创想鸟】其它相关文章！