欢迎光临
我们一直在努力

CSS | CSS伪类选择器

  • 伪类选择器定义特殊状态下的样式
  • 无法用标签、id、class及其他属性实现

链接伪类有四种状态,分别为:激活状态、已访问状态、未访问状态、鼠标悬停状态。

伪类说明
:link未访问的链接
:visited已访问的链接
:hover鼠标悬停状态
:active激活的链接

下面为a标签通过伪类选择器设置四种状态下的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            a:link{color:blue;}
            a:visited{color: gray;}
            a:hover{color: red;}
            a:active{color: saddlebrown;}
        </style>
    </head>
    <body>
        <a href="http://blog.sanrenyan.com">散人研Blog</a>
    </body>
</html>

四种状态中的鼠标悬停状态和激活状态还可用于p标签或div标签中,如下面的例子,鼠标悬浮时变成红色,点击时变色并使字体大小变成30px。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            p:hover{color: red;}
            p:active{color: saddlebrown;font-size: 30px;}
        </style>
    </head>
    <body>
        <p>点击我,让我变大!</p>
    </body>
</html>

兼容性问题

当使用伪类选择器时,必须按照顺序书写四种状态,不然会导致设置失败!

如果一个页面有很多链接需要设置不同样式,可以通过类选择器(添加class属性)、后代选择器等加以区分设置。

赞(0) 打赏
未经允许不得转载:散人研 » CSS | CSS伪类选择器
分享到: 更多 (0)

评论 抢沙发

3 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏