在HTML中,我們可以使用CSS來美化我們的網站。其中,偽類別是CSS中非常重要的部分。偽類別是指使用CSS選擇器來添加一些特殊的狀態或者樣式來區分那些沒有特殊狀態或樣式的元素。CSS中有許多偽類別,但是其中比較常用的有四個,包括::hover,:active,:visited和:focus。下面我們將逐一來了解這四種偽類別屬性。
/* 樣式1 */ a:hover { color: red; } /* 樣式2 */ a:active { color: blue; } /* 樣式3 */ a:visited { color: gray; } /* 樣式4 */ input:focus { border: 1px solid blue; }
:hover偽類別可用于當鼠標指針懸停在元素上時更改其樣式。在上面的CSS中,我們將a標簽的字體顏色更改為紅色。當你將鼠標指針懸停在鏈接上時,就會看到鏈接的顏色變成了紅色。這是在許多網站中被廣泛使用的一種選擇器。
:active偽類別可用于在用戶激活(鼠標左鍵按下時)一個元素時更改其樣式。在上面的CSS中,我們將a標簽的字體顏色更改為藍色。當你點擊該鏈接時,鏈接將變成藍色。
:visited偽類別可用于為已訪問的鏈接指定樣式。同樣,在上面的CSS中,我們將a標簽的字體顏色更改為灰色。一旦這個鏈接被點擊并被瀏覽器記錄下來,然后再次被點擊時,它將以灰色來呈現。通常,瀏覽器用顏色來幫助用戶了解自己是否已經訪問過某個鏈接。
:focus偽類別可用于為元素設置焦點時指定樣式。在上面的CSS中,我們將input元素周圍的邊框顏色更改為藍色。當你單擊該輸入框并讓它獲得焦點時,它將以藍色邊框來顯示。這種狀態在表單設計中非常有用,它可以幫助用戶了解當前處于哪個輸入框中。
上一篇css偽類標準
下一篇mysql日期轉換成數字