一、: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/n/300680.html
微信扫一扫 
支付宝扫一扫 