css 伪类的作用 |css背景图片距离左边50%

最常见的 CSS 伪类有以下几种：

:hover  // 当鼠标悬停于元素上时
:active // 当元素被激活时（通常是用户点击时）
:focus // 当元素被聚焦时（例如用户在 input 标签内输入内容时）
:first-child // 当元素是它父元素的第一个子元素时
:last-child  // 当元素是它父元素的最后一个子元素时
:only-child  // 当元素是它父元素的唯一一个子元素时

例如，大家可以使用 :hover 伪类来改变链接的颜色：

a:hover {
color: red;
}

以上代码表示当鼠标悬停于链接上时，链接字体的颜色将变成红色。同样，大家可以使用其他伪类来改变其他元素在不同状态下的样式。

在实际应用中，CSS 伪类可以让大家实现一些非常有趣的效果。例如，大家可以给一个表格的每一行交替添加不同背景色的伪类：

tr:nth-child(odd) {
background-color: #e6f2ff;
}
tr:nth-child(even) {
background-color: #fff;
}

以上代码表示表格中的奇数行背景颜色为 #e6f2ff，偶数行背景颜色为 #fff，这样做可以让表格更加美观。

总之，CSS 伪类是前端开发中一个不可或缺的属性，通过使用它们，大家可以更好地控制元素的样式和交互效果，从而实现更出色的网站设计。