CSS之:active选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS之:active选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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?了
?
https://www.cnblogs.com/ghost-xyx/p/3763669.html(更多偽元素及其用法）
轉載于:https://www.cnblogs.com/raind/p/9408983.html
總結
以上是生活随笔為你收集整理的CSS之:active选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： log-slave-updates 引起
- 下一篇： addEntriesFromDictio