一、:hover偽類
當鼠標懸停在元素上時，:hover偽類可用於更改元素的樣式。例如，當用戶將鼠標懸停在鏈接上時，我們可以更改鏈接的顏色。
a:hover {
color: red;
}
二、:active偽類
當用戶單擊某個元素並將其保持為活動狀態時，:active偽類可以更改元素的樣式。例如，在用戶單擊一個按鈕時，我們可以用較暗的顏色為按鈕添加陰影效果，以表明按鈕被按下。
button:active {
box-shadow: 0 0 5px #000;
color: #888;
}
三、:focus偽類
當元素獲得焦點時，例如在用戶通過鍵盤選擇表單元素時，:focus偽類可以更改元素的樣式。例如，在用戶點擊輸入框並附加焦點時，我們可以通過更改輸入框的邊框顏色來突出輸入框。
input:focus {
border: 1px solid blue;
}
四、:first-child偽類
當元素是其父元素中的第一個子元素時，:first-child偽類可以為該元素應用樣式。例如，我們可以使用:first-child選中頁面的第一個段落，並更改其顏色。
p:first-child {
color: green;
}
五、:last-child偽類
當元素是其父元素中的最後一個子元素時，:last-child偽類可以為該元素應用樣式。例如，我們可以使用:last-child選中表格的最後一行並更改其顏色。
table tr:last-child {
background-color: #EEE;
}
六、:nth-child(n)偽類
當元素是其父元素的第n個子元素時，:nth-child(n)偽類可以為該元素應用樣式。例如，我們可以使用:nth-child(odd)選中表格的奇數行並更改其顏色。
table tr:nth-child(odd) {
background-color: #EEE;
}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/300680.html
微信掃一掃 
支付寶掃一掃 