CSS网络大讲堂.pdf

第 3 章 伪类和伪元素 伪类可以看作是一种特殊的类选择符，是能够被支持CSS 的浏览器自动识别的特殊选择 符。可以不使用class 调用直接使用。伪元素则是可以将特殊效果添加到某些选择符中。 在网页开发中，经常使用伪类对连接的不同状态定义不同的效果。而使用伪元素也可以 实现某些特殊的样式效果。在本章中将详细介绍关于伪类和伪元素的相关内容。 3.1 超链接伪类的用法 超链接伪类的用法 3.1.1 问题描述 我现在要做一个超链接按钮，有两张图片。需要实现的效果是，当超链接未访问时显示 一张图片，当鼠标悬停在超链接上面时换另一张图片。代码如下所示： a.adown:hover{background-image:url(img/22.jpg);} a.adown{background-image:url(img/23.jpg);} 可是通过以上代码根本没有实现效果，:hover 不能用 background-image 吗？请问该怎 么办？ 3.1.2 解决办法 在 a.adown 中需要添加 display:block ，还需要设置图片的宽度和高度，这样就能实现效 果了。代码如下所示： a.adown:hover{background:url(img/22.jpg);} a.adown{background:url(img/23.jpg);display:block; width:100px; height:100px;} a class=adown href=#超链接/a 3.1.3 知识扩展——超链接伪类的用法 4 超链接伪类是伪类中应用最多的伪类。一般表示超链接的 种状态，包括：已访问状态、 未访问状态、鼠标悬停状态和被激活状态。下面的代码展示了超链接伪类的使用方法。 a:link { color: blue } / 未访问的链接为蓝色 / * * a:visited { color: red } / 已访问的链接为红色 / * * a:hover { color: yellow } / 当鼠标悬停时链接为黄色 / * * a:active { color: lime } / 当单击链接时为灰色 / * * 除了设置链接访问时的颜色样式，还可以通过 text-decoration 属性来设置下划线是否出 现；或者使用font-family 改变字体样式；或者使用background 改变链接背景颜色。具体代码 如下所示： a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} C a.four:link {color: #ff0000} S a.four:visited {color: #0000ff} S 堂 讲 大 络 网