CSS可以通過(guò)偽狀態(tài)選擇器來(lái)操作不同狀態(tài)的元素,這些狀態(tài)包括懸停、點(diǎn)擊、選中、未訪問(wèn)過(guò)的鏈接等等。在HTML中,這些狀態(tài)可以通過(guò)給元素添加相應(yīng)屬性來(lái)實(shí)現(xiàn)。例如:
a:link { color: blue; } /* 未訪問(wèn)過(guò)的鏈接 */ a:visited { color: purple; } /* 已訪問(wèn)過(guò)的鏈接 */ a:hover { color: red; } /* 鼠標(biāo)懸停 */ a:active { color: green; } /* 點(diǎn)擊 */
這些偽狀態(tài)選擇器可以應(yīng)用于不同的元素,例如:
/* 應(yīng)用于所有表單元素 */ input:focus { background-color: yellow; } /* 應(yīng)用于所有文本框 */ input[type="text"]:focus { border-color: blue; }
除了上述偽狀態(tài)選擇器之外,還有一些特殊的偽狀態(tài)選擇器,例如:
:first-child /* 選擇元素的第一個(gè)子元素 */ :last-child /* 選擇元素的最后一個(gè)子元素 */ :nth-child(n) /* 選擇元素的第n個(gè)子元素 */ :nth-of-type(n) /* 選擇同類元素的第n個(gè)元素 */ :checked /* 選擇已勾選的表單元素 */
偽狀態(tài)選擇器為我們提供了更多元素狀態(tài)的操作方式,使得我們能夠更靈活地設(shè)計(jì)頁(yè)面效果,并提高用戶體驗(yàn)。
上一篇css偽元素圖
下一篇css偽元素 返回箭頭