css中的伪类选择器（css的伪类选择器有哪些）

编程日记 • 2026-02-26 14:40 • 阅读 0

以下内容不再属于css属性, 但暂时归入属性篇中.

链接(link):

在html里用<a></a>标明链接, 在css里用a作为链接的选择器名.

css的缺点和它的优点一样明显, 其最大的缺陷就在于网页的动态表现不足, 在这一点上和Flash差距尤为突出.

好在css还是留了一手, 那就是链接的伪类选择器, 所谓伪类就是指依赖于浏览器或是用户的状态. 对于链接来讲, 存在link, hover, visited, active四种状态, 即四种伪类选择器: a:link(存在链接, 但无鼠标动作),

a:visited

(被或访问过),

a:hover

(鼠标悬停于链接上时的状态),

a:active

(鼠标与释放之间的状态).

css便是以这几个伪类选择器实现了其为数不多的动态效果. 目前最为常用的就是导航条和按钮的动态显示. 以下用一个动态按钮的实例来说明这四个伪类选择器.

1. 首先准备一副图片(button.png), 如下图(160px*240px), 其由四幅160px*60px的小图自上而下排列而成.

2. 接着需要往你的本地调试文件夹(调试环境的建立方法参考属性(1)中的说明)的index.htm中写入html代码, 如下:

3. 在style.css中写入以下代码:

可以看到如 Example2 的效果.

4. 代码解释:

在index.htm写入如上代码, 目的在于插入一个id名为”button”的盒子(div),且其内含有一个链接<a href=https://bianchenghao.cn/css/”#”></a>.

在css文件中写入以上代码, 目的在于控制盒子中链接的表现, 通过名为”#button a”的选择器来实现. 链接的宽高为160px*60px, 背景为图片button.png.

在这强调一下display:block的作用. 由于在html文件中,链接<a href=https://bianchenghao.cn/css/”#”> </a>中没有任何的内容(content)填充, 如果没有声明”display:block”, 那么即使声明了选择器”#button a”的宽高, 浏览器也会因为html文件中没有内容而无法显示链接. 所以”display:block”在这里的作用就在于强制浏览器显示没有内容填充的链接.

用伪类选择器a:link声明链接的背景图片在左上角显示, 即距离左边和顶边分别0, 0. 但由于已经在选择器 “#button a”中声明了图片位置, 此代码可有可无.

用伪类选择器a:hover声明鼠标悬停时, 背景图片上移60px, 而使排在第二位的绿色小图片显示出来;

用伪类选择器a:active声明在鼠标与释放之间的状态时, 背景图片上移120px, 而使排在第三位的红色小图片显示;

用伪类选择器a:visited声明在链接被或访问过时, 背景图片上移180px, 而使排在第四位的灰色小图片显示;

现在你基本了解了css动态按钮的制作过程, 但以上css代码还存在一个严重的

缺陷

, 相信你会很快发现问题所在——这个按钮居然是一个”

一次性按钮

“, 也就是说这个按钮在第一次后, 就一直显示那个灰色小图片, 你能想出解决方法吗? 请在留言中指出.

答案会在下一篇文章中说明! 下篇将会涉及css的核心内容——

盒子模型

margin

和

padding

属性.(正文完)

今天的文章 css中的伪类选择器（css的伪类选择器有哪些）分享到此就结束了，感谢您的阅读。

css中的伪类选择器（css的伪类选择器有哪些）

相关推荐