CSS基础教程之伪类选择器

CSS伪类选择器:给超链接加的样式(链接的不同状态加样式)

一个超链接,有四个状态:

正常状态(:link):鼠标没放上之前链接的样式。

放上状态(:hover):鼠标放到链接上时的样式。

激活状态(:active):按住鼠标左键不松开的样式,这个状态特殊短暂。

访问过的状态(:visited):按下鼠标左键,并弹起,这时的样式效果。

在平常工作中,会使用以下写法,来给链接加不同的样式:

a:link, a:visited{ color:#444; text-decoration:none; }  //将“正常状态”和“访问过的状态”合二为一。

a:hover{ color:#990000; text-decoration:underline; }  //“鼠标放上”单做一种效果

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    </head>
    <style type="text/css">
        .box {
            
            height:30px;
            border:1px solid red;
            padding:10px;
        }
        .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/
        .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
       
    </style>
    <body>
        <div class="box">
            <a href="#">欢迎来到php.cn</a>|
            <a href="#">首页</a>|
            <a href="#">课程</a>|
            <a href="#">问答</a>|
            <a href="#">手记</a>
        </div>
    </body>
</html>



继续学习
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <style type="text/css"> .box { height:30px; border:1px solid red; padding:10px; } .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/ .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/ </style> <body> <div class="box"> <a href="#">欢迎来到php.cn</a>| <a href="#">首页</a>| <a href="#">课程</a>| <a href="#">问答</a>| <a href="#">手记</a> </div> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

HTML+CSS基础入门教程

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

我是灰太狼

看课程内容加代码很容易理解

7年前    添加回复 0

看山看水看代码

一个超链接,有四个状态: 正常状态(:link):鼠标没放上之前链接的样式。 放上状态(:hover):鼠标放到链接上时的样式。 激活状态(:active):按住鼠标左键不松开的样式,这个状态特殊短暂。 访问过的状态(:visited):按下鼠标左键,并弹起,这时的样式效果。

7年前    添加回复 0

看透不说透

嗯,了解 a 标签的4种状态

7年前    添加回复 0

baby不要哭泣

可以把<a>标签效果的下划线去了

7年前    添加回复 0

尼古拉阿列克塞耶维奇奥斯特洛夫斯基

伪类真没搞清是什么意思

7年前    添加回复 0

.box 什么意思

[最新 数据分析师 的回答] .box 什么意思-PHP中文网问答-.box 什么意思-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~