DIV CSS 佈局教程網

這篇文章主要介紹了CSS :active 偽類 元素被激活時的樣式 ,需要的朋友可以參考下   :active -- CSS :active 偽類，適用於一個元素被激活時的樣式

語法: :active
CSS版本：CSS1

說明：
適用於一個元素被激活時的樣式，例如鼠標在此元素的區域內按下但還沒有釋放時
客戶端（浏覽器）可以根據用戶與其交互的動作改變其渲染效果，CSS為這種情況提供了三個偽類：hover、active、focus
上述三種偽類不是互斥的，一個元素同時可以適用其中的若干個
:active偽類，適用於一個元素被用戶激活時，例如用戶在按下鼠標之後放開鼠標之前的這一段時間內。當用戶放開鼠標後，恢復元素原有的樣式
active，中文"激活、活躍"的意思

語法


復制代碼代碼如下:
:active
a:active
a.class:active


示例

CSS Code復制內容到剪貼板

1. a:active
2. {
3. color:yellow;
4. background:blue;
5. font-size:small;
6. }
7. p:active
8. {
9. color:yellow;
10. background:blue;
11. font-size:large;
12. }
13. div:active
14. {
15. color:red;
16. background:lime;
17. font-size:small;
18. }

查看演示：http://demo.jb51.Net/JS/2015/CSS_active/demo1.htm

偽類選擇符的順序：L-V-H-A

CSS提供了四種元素設置鏈接的顏色，包括:link、:visited、:hover、:active，它們的聲明是有一定順序的，我們簡稱這種順序為L-V-H-A，即link最先，其次visited，之後hover，最後active，如此聲明才能保證hover與active狀態顯示正確的樣式

示例
統一定義鏈接各種狀態下的樣式

CSS Code復制內容到剪貼板

1. a:link
2. {
3. color:red;
4. }
5. a:visited
6. {
7. color:green;
8. }
9. a:hover
10. {
11. color:yellow;
12. background:blue;
13. }
14. a:active
15. {
16. color:lime;
17. background:red;
18. }

演示效果：http://demo.jb51.Net/JS/2015/CSS_active/demo2.htm

一個頁面可以定義多個鏈接樣式
可以在一個頁面定義多種鏈接樣式，例如下面示例定義了灰色與白色兩種樣式的連接

CSS Code復制內容到剪貼板

1. .gray:hover,.gray:focus,.gray:active,.gray:link,.gray:visited
2. {
3. color:#999;
4. }
6. .white:hover,.white:focus,.white:active,.white:link,.white:visited
7. {
8. color:#000;
9. font-weight:bold;
10. }

演示頁面：http://demo.jb51.Net/JS/2015/CSS_active/demo3.htm

IE浏覽器不支持A元素以外的其它元素的:active偽類
IE6、IE7(Q)、IE8(Q)浏覽器不支持A元素以外的其它元素的:active偽類，可通過示例一測試

浏覽器兼容性

CSS E:active 偽類浏覽器兼容性 選擇符 IE6 IE7 IE8 IE9 FF CH OP SA E:active part part part yes yes yes yes yes