當我們在網頁上進行點擊時,一般會有一些變化發生,其中就包括元素的樣式變化。在CSS中,我們可以通過偽類選擇器來控制點擊后元素的樣式表現。
button:active { background-color: #ccc; border: 1px solid #000; }
上述代碼中,我們使用了:active
偽類選擇器來控制按鈕在被點擊時的樣式表現。當按鈕被按下時,背景顏色將變為灰色,邊框將變為黑色。
除了:active
偽類選擇器外,還有:hover
偽類選擇器可以控制鼠標懸停在元素上時的表現。同樣,我們可以使用:focus
偽類選擇器來控制元素獲得焦點時的表現。
a:hover { color: #FF0000; text-decoration: underline; } input:focus { outline: none; border: 2px solid #FF0000; }
上述代碼中,當鼠標懸停在鏈接上時,文字顏色將變為紅色,下劃線將出現。當輸入框獲得焦點時,外邊框將變為紅色。
總之,在CSS中,可以通過偽類選擇器來控制元素在鼠標點擊、鼠標懸停或者獲得焦點時的表現。通過運用這些選擇器,我們可以制作出更加美觀、交互性更強的網頁。