標籤：cti 改變 back 讀者 恢複 指定 one char ansi
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，也就是意味著有兩個過渡。
如果讀者只設定了在 div 裡面的 transition ，那麼選取器的過渡時間也就預設為 div 裡的 transition 了。
如果讀者有興趣也可以試一試transition和其他選取器的組合。
【CSS】詳解:active選取器
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
