CSS :active 偽類
更多“自己嘗試”的例子見下文。
定義和用法
:active 偽類用於選擇並設定使用者正在啟用的元素樣式。
:active 偽類最常用於 <a> 和 <button> 元素。當用戶單擊連結時，該連結將變得啟用，按鈕也是如此。
提示：使用 :link 為未訪問過的頁面連結設定樣式，使用 :visited 為已訪問過的頁面連結設定樣式，使用 :hover 為滑鼠懸停在連結上時設定樣式。
注意：:active 必須出現在 CSS 定義中 :hover (如果存在) 之後，才能生效！
| 版本 | CSS1 |
|---|
瀏覽器支援
表中數字表示該偽類完全支援的第一個瀏覽器版本。
| 偽類 | |||||
|---|---|---|---|---|---|
| :active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS 語法
:active {
css 宣告;
}
更多示例
示例
單擊時，選擇並設定 <p>、<h1> 和 <a> 元素的樣式
p:active, h1:active, a:active {
background-color: yellow;
}
自己動手試一試 »
示例
選擇未訪問、已訪問、滑鼠懸停和活動連結並設定不同樣式
/* 未訪問的連結 */
a:link {
color: green;
}
/* 已訪問的連結 */
a:visited {
color: green;
}
/* 滑鼠懸停在連結上 */
a:hover {
color: red;
}
/* 選中的連結 */
a:active {
color: yellow;
}
自己動手試一試 »
示例
用不同的樣式設定連結的樣式
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 連結
CSS 教程：CSS 按鈕
CSS 教程：CSS 偽類
