CSS中有一种重要的选择器称为伪类,它们通过在选择器中添加冒号和关键词来表示元素在某种特定状态下的样式。伪类有多种种类,包括hover、active、visited等等。这些伪类通常是在CSS样式文件中使用的,但也可以在内联样式中使用。
a { color: #000; text-decoration: none; } a:hover { color: red; text-decoration: underline; }
在上述样式中,我们定义了所有链接的默认样式,但是当鼠标悬停在链接上时,链接将会呈现不同的样式。这就是使用伪类的基本原理。
在内联样式中使用伪类也是完全可行的。例如,我们可以将一个元素的背景颜色更改为鼠标悬停时的颜色:
<div style="background-color: #fff;" onmouseover="this.style.backgroundColor='#f2f2f2;'" onmouseout="this.style.backgroundColor='#fff;'"></div>
在上述代码中,我们将DIV元素的默认背景颜色指定为白色。但当鼠标悬停在该元素上时,我们使用onmouseover事件将其背景颜色更改为灰色。当鼠标移开时,使用onmouseout事件将其背景颜色恢复为白色。
虽然在内联样式中使用伪类可以实现某些效果,但是通常情况下建议将样式定义在CSS文件中,这样不仅能够使代码更加优雅,也更加易于维护。