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> p { width:100px; height:100px; background:red; transition: 5s; } p:active { width:300px; height:300px; transition:3s; } </style> </head> <body> <p></p> </body></html>
這裡面有兩個transition，也就是意味著有兩個過渡。
第一個過渡是啟用active選取器，這時候 p:avtive 裡的 transition 起作用。
第二個過渡是鬆開滑鼠，映像的尺寸恢複正常的過程，這時候 p 裡的 transition 起作用。
如果讀者只設定了在 p 裡面的 transition ，那麼選取器的過渡時間也就預設為 p 裡的 transition 了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
