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選擇器所花費的時間。
<!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，也就是意味著有兩個過渡。
如果讀者只設置了在 div 里面的 transition ，那么選擇器的過渡時間也就默認為 div 里的 transition 了。
如果讀者有興趣也可以試一試transition和其他選擇器的組合。
【 微信掃一掃 】
