Active的一段话
active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。
Active的特点
其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。
<!DOCTYPE html><html> ?<head> ???<title>a</title> ???<meta name="content-type" content="text/html; charset=UTF-8"> ?????<style> ?????a{ ???????display:block; ???????width:30px; ???????margin:20px; ???????border-radius:8px; ???????padding:20px 50px; ???????text-align:center; ???????background:green; ?????} ?????a:active{ ???????background:indigo; ?????} ???</style> ?</head> ???<body> ???<a href="paris.jpg">link</a> ?</body></html>我们可以通过过渡属性（transition）来调整这个时间。
?????a:active{ ???????background:indigo; ???????transition:3s; ?????}读者可以做一个实验，改变其中transition的值，然后测试:avtive选择器所花费的时间。
ACTIVE示例
<!DOCTYPE html><html> ?<head> ???<title>a</title> ???<meta name="content-type" content="text/html; charset=UTF-8"> ???<style> ???????div ?????{ ???????width:100px; ???????height:100px; ???????background:red; ???????transition: 5s; ??????} ???????div:active ??????{ ???????width:300px; ???????height:300px; ???????transition:3s; ???????} ?????</style> ?</head> ?<body> ?<div></div> ?</body></html> ????????????这里面有两个transition，也就是意味着有两个过渡。
- 第一个过渡是激活active选择器，这时候 div:avtive 里的 transition 起作用。
- 第二个过渡是松开鼠标，图像的尺寸恢复正常的过程，这时候 div 里的 transition 起作用。
如果读者只设置了在 div 里面的 transition ，那么选择器的过渡时间也就默认为 div 里的 transition 了
https://www.cnblogs.com/ghost-xyx/p/3763669.html(更多伪元素及其用法）
CSS之:active选择器
原文地址：https://www.cnblogs.com/raind/p/9408983.html