CSS伪类应用实战

一、: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;
}