:active 選擇器 · CSS基礎

## :active 選擇器 ### 定義和用法 :active向活動的鏈接添加特殊的樣式，當你點擊一個鏈接時它變成活動鏈接。 :active選擇器匹配激活元素，不限于用戶可以與之交互的元素。 :active是一個偽類選擇器，它適用于被激活的元素。最常見的示例是單擊HTML文檔中的超鏈接：當按住鼠標按鈕時，鏈接處于活動狀態。 **提示:** [:link](https://www.w3cschool.cn/cssref/sel-link.html) 選擇器設置了未訪問過的頁面鏈接樣式, [:visited](https://www.w3cschool.cn/cssref/sel-visited.html) 選擇器設置訪問過的頁面鏈接的樣式, [:hover](https://www.w3cschool.cn/cssref/sel-hover.html) 選擇器當有鼠標懸停在其上的鏈接樣式。 **注意:** 為了產生預期的效果，在CSS定義中，:active必須位于:hover之后！！ ## 實例1--選擇激活的鏈接樣式： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> a:active { background-color:yellow; } </style> </head> <body> <a href="http://www.w3cschool.cn">w3cschool.cn</a> <a href="http://www.wikipedia.org">wikipedia.org</a> <p><b>注意:</b> :active選擇器樣式觸發時鏈接到鏈接頁面</p> </body> </html> ``` ## 實例2--激活的、已訪問的、未訪問的或者當有鼠標懸停在其上的鏈接： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> a:link {color:green;} a:visited {color:green;} a:hover {color:red;} a:active {color:yellow;} </style> </head> <body> <p>將鼠標移上并點擊此鏈接: <a href="http://www.w3cschool.cn">w3cschool.cn</a></p> </body> </html> ``` ## 實例3--不同樣式的鏈接樣式： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> a.ex1:hover,a.ex1:active {color:red;} a.ex2:hover,a.ex2:active {font-size:150%;} a.ex3:hover,a.ex3:active {background:red;} a.ex4:hover,a.ex4:active {font-family:monospace;} a.ex5:visited,a.ex5:link {text-decoration:none;} a.ex5:hover,a.ex5:active {text-decoration:underline;} </style> </head> <body> <p>將鼠標移至鏈接上查看其樣式改變.</p> <p><a class="ex1" href="/css/">This link changes color</a></p> <p><a class="ex2" href="/css/">This link changes font-size</a></p> <p><a class="ex3" href="/css/">This link changes background-color</a></p> <p><a class="ex4" href="/css/">This link changes font-family</a></p> <p><a class="ex5" href="/css/">This link changes text-decoration</a></p> </body> </html> ```