當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS之:active选择器

發布時間：2025/4/5 CSS 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 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，也就是意味著有兩個過渡。

第一個過渡是激活active選擇器，這時候 div:avtive?里的 transition?起作用。

第二個過渡是松開鼠標，圖像的尺寸恢復正常的過程，這時候 div?里的 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