一、hover偽類
hover偽類是最為人熟知的偽類。通過在樣式表中應用:hover選擇器，可以為某個元素在鼠標懸浮時設置樣式。這可以讓用戶更加直觀地了解自己正在與哪個元素交互。
下面是一個例子，當鼠標懸浮在超鏈接上時，將其文字內容變色：
a:hover {
color: #ff0000;
}
二、nth-child偽類
nth-child偽類允許您選擇並樣式化一組中的每個子元素。您可以使用:nth-child規則結合數字參數來選取子元素。這對於基於網格的布局和具有相同樣式的操作非常有用。
下面是一個例子，將清單中的每個第二個列表項的顏色更改為淡藍色：
ul li:nth-child(2n) {
color: #3498db;
}
三、visited偽類
visited偽類可以為先前已訪問的鏈接元素設置樣式。這對於確保用戶知道自己已訪問哪些鏈接非常有用。
下面是一個例子，當用戶訪問過鏈接時，鏈接的顏色將更改為淺灰色：
a:visited {
color: #ccc;
}
四、focus偽類
focus偽類可以為當前擁有輸入焦點的元素（例如input文本框）設置樣式。這對於提高頁面的可訪問性非常有用，因為它確保了有限的鍵盤用戶可以輕鬆地導航頁面中的元素。
下面是一個例子，當用戶選擇輸入文本框時，文本框將以灰色邊框呈現：
input:focus {
border: 1px solid #ccc;
}
五、checked偽類
checked偽類用於選擇被選中的輸入元素，例如單選按鈕和複選框。這對於在表示用戶選擇時為元素提供視覺反饋非常有用。
下面是一個例子，當用戶選擇單選按鈕時，該按鈕將呈現為粗體：
input[type="radio"]:checked {
font-weight: bold;
}
六、active偽類
active偽類可以用於為處於活動狀態或被點擊但未釋放的元素設置樣式。這對於為用戶提供清晰、立即響應的反饋非常有用。
下面是一個例子，當用戶點擊按鈕時，按鈕將在按下時變為深灰色：
button:active {
background-color: #444;
}
原創文章，作者：YXHU，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/132937.html
微信掃一掃 
支付寶掃一掃 