CSS事件選擇器是CSS中非常有用的一種選擇器,可以根據元素的狀態來應用樣式。這些事件選擇器有hover、focus、active、target等。
a:hover{ color: red; background-color: #ccc; }
:hover選擇器用于當鼠標懸停在元素上時應用樣式。在上面的例子中,當鼠標懸停在鏈接上時,它會變成紅色文字并帶有灰色背景。
input:focus{ border: 3px solid blue; }
:focus選擇器用于當元素獲得焦點時應用樣式。在上面的例子中,當輸入框獲取焦點時,它將帶有藍色邊框。
button:active{ background-color: green; color: white; }
:active選擇器用于當元素被激活時應用樣式。在上面的例子中,當鼠標按下并釋放按鈕時,它將變為綠色背景和白色文字顏色。
#nav li a:target{ color: white; background-color: blue; }
:target選擇器用于當與URI片段標識符匹配的元素被選擇時應用樣式。在上面的例子中,當點擊帶有href值為URI片段標識符的鏈接時,它將帶有藍色背景和白色文字。
這些事件選擇器可以幫助我們實現交互式網頁,提高用戶體驗。