CSS中active偽類元素被激活時的樣式

本篇文章為大家展示了CSS中active偽類元素被激活時的樣式 ，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

:active -- CSS :active 偽類，適用于一個元素被激活時的樣式
語法: :active
CSS版本：CSS1

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

語法

代碼如下:

:active
a:active
a.class:active

示例

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狀態顯示正確的樣式

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

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

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

1. .gray:hover,.gray:focus,.gray:active,.gray:link,.gray:visited   

2. {   

3.     color:#999;   

4. }   

5.   

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中active偽類元素被激活時的樣式 ，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。