在網(wǎng)頁開發(fā)中,有時需要在元素被點(diǎn)擊后添加一種激活狀態(tài),用來表示用戶正在與該元素進(jìn)行交互。CSS 提供了一個:pseudo-class偽類選擇器,可以實(shí)現(xiàn)這種效果。其只能用于鏈接(a)和表單元素,例如按鈕(button)、單選框(radio)和復(fù)選框(checkbox)。
a:active { color: red; background-color: yellow; } button:active, input[type="button"]:active, input[type="submit"]:active { color: #333; outline: none; background-color: #cfd8dc; }
如示例所示,添加 a:active 或者 button:active 的樣式來顯示激活狀態(tài)。當(dāng)用戶點(diǎn)擊鏈接或表單元素且鼠標(biāo)在此元素上按下時,此激活狀態(tài)立即開啟。常見的實(shí)現(xiàn)是把顏色和背景色設(shè)置為與鏈接默認(rèn)顏色差異較大,以突出顯示鏈接。
應(yīng)當(dāng)注意的是,這種效果的實(shí)現(xiàn)取決于瀏覽器本身,所以在不同的瀏覽器中看起來可能會有所不同。如果你的樣式不太好用,請檢查不同瀏覽器中它的表現(xiàn)如何。可以在一些標(biāo)準(zhǔn)的瀏覽器中測試它的行為,如 Chrome、Firefox 和 Edge。