css学习笔记(四)

CSS伪类选择器实战

最新推荐文章于 2025-04-24 09:09:44 发布

原创最新推荐文章于 2025-04-24 09:09:44 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS中伪类选择器的使用方法，特别是针对链接状态的改变，包括未访问、已访问、鼠标悬停和激活状态的颜色调整。通过实例代码展示了如何使网站链接在鼠标悬停时颜色发生变化。

今天学习下伪类选择器

一般都有网站都有当你鼠标放上去颜色会发现变化,这个就需要使用伪类选择器去实现.这就是常用的连接伪类选择器

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
       a{
           text-decoration: none;
           font-size: 16px;
           color: #333;
           text-align: center;
       }
        a:hover{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.163.com">网易</a>
        <a href="http://www.souhu.com">搜狐</a>
        <a href="http://www.qq.com">腾讯</a>
    </div>
</body>
</html>

效果：