偽類是CSS中一種非常有用的元素選擇器,能夠實現在不改變HTML結構的情況下,操作不同狀態下的元素樣式。以下是幾種常用的CSS偽類選擇器:
/* 鼠標懸停狀態 */ a:hover { color: red; } /* 訪問過的鏈接 */ a:visited { color: purple; } /* 第一個子元素 */ li:first-child { font-weight: bold; } /* 最后一個子元素 */ li:last-child { text-decoration: underline; } /* 奇數位置子元素 */ li:nth-child(odd) { background-color: #f2f2f2; } /* 偶數位置子元素 */ li:nth-child(even) { background-color: #ddd; }
除了以上幾個例子,還有很多其他的偽類選擇器,例如:active、focus、enabled、disabled等等。在實際開發中,靈活運用偽類可以讓你的布局和樣式更加豐富。
需要注意的是,偽類選擇器只能作用于某些元素的特定狀態,比如鏈接的:hover狀態,若是想要改變一個元素在不同情況下的樣式,應該使用偽元素(如:before和:after)或者JavaScript來實現。
上一篇css偽類與偽元素區別
下一篇css偽類是啥意思