CSS偽類是CSS的一種強大功能,用于在頁面元素的不同狀態下應用樣式。偽類允許開發人員選擇元素在不同狀態下的不同樣式,這些狀態可能包括焦點,懸停,活動狀態或訪問狀態。
/* :hover偽類示例 */ a:hover { color: red; text-decoration: underline; cursor: pointer; } /* :active偽類示例 */ a:active { color: green; } /* :visited偽類示例 */ a:visited { color: blue; }
在上面的示例中,:hover
在鏈接懸停時應用紅色文字和下劃線,:active
當鏈接被點擊時為綠色,而:visited
當用戶訪問過鏈接時為藍色。
偽類也可以與其他選擇器結合使用,例如:nth-child
偽類,用于選擇父元素的特定子元素。
/* :nth-child偽類示例 */ li:nth-child(odd) { background-color: #eee; } li:nth-child(even) { background-color: #fff; }
在上面的示例中,:nth-child
偽類選擇列表項(li
元素),并使用偶數和奇數值的背景顏色對其進行“條紋化”。
總的來說,CSS偽類為我們提供了一種更加靈活的方式來應用樣式,使頁面元素以一種動態和有意義的方式呈現,從而為用戶提供更好的體驗。