CSS3可以為網(wǎng)頁元素添加許多亮麗的效果,其中一個常見的效果就是點(diǎn)擊鏈接后改變鏈接顏色。我們可以用以下的樣式定義來實(shí)現(xiàn)這一效果:
a:active { color: red; }
在這里,我們使用了偽類:active
,當(dāng)一個鏈接被鼠標(biāo)點(diǎn)擊時,它處于活動狀態(tài),此時我們就可以改變鏈接的顏色。這個樣式可以用在任何鏈接上,無論是文本鏈接還是圖像鏈接。
當(dāng)然,在Web設(shè)計中,我們一般不會只靠鼠標(biāo)點(diǎn)擊來激活鏈接。鍵盤操作、輕觸設(shè)備和屏幕閱讀器等可能觸發(fā)鏈接狀態(tài)變化,還有一些瀏覽器插件會禁用:active
樣式。因此,我們也可以使用以下代碼來為鏈接添加激活狀態(tài)的樣式:
a:active, a:focus { color: red; }
這樣,無論用戶用鼠標(biāo)點(diǎn)擊、鍵盤操作還是其他方式激活鏈接,它都會變成紅色。這個樣式定義還增加了:focus
偽類,這個偽類標(biāo)志著元素獲取焦點(diǎn)時的狀態(tài),因此它不僅適用于鏈接,還適用于塊級元素、表單控件等其他元素。
最后,我們提供一個完整的例子,它包含了一個鏈接和相應(yīng)的樣式定義:
<a href="#">點(diǎn)擊這里</a> a:active, a:focus { color: red; }
現(xiàn)在,只要用戶點(diǎn)擊或者激活鏈接,它就會變成紅色了。