2021-07-15 a标签的四种状态与a标签的四种伪类选择器

原创于 2021-07-15 20:24:38 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

笔记专栏收录该内容

23 篇文章

订阅专栏

本文探讨了HTML中a标签的四种状态——link、visited、hover和active，并介绍了对应的CSS伪类选择器的使用。内容强调了CSS规定:hover必须置于:link和:visited之后以确保正确应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/a标签的伪类选择器.css">
</head>
<body>
    <a href="https://www.baidu.com">未访问时 蓝色</a>
    <a href="https://www.JD.com">访问过后 紫色</a>
    <a href="https://www.taobao.com">鼠标悬浮 不变色</a>
    <a href="https://www.17sucai.com">点击未松开</a>
</body>
</html>

CSS代码👇👇👇

/* :link a标签未访问时的样式 */
a:link{
    color: skyblue; 
    background-color: rgb(213, 228, 130);
}

/* :visited a标签访问过后的样式 */
/* 浏览器限制了 visited的功能 ，为了提高用户的隐私度，防止浏览信息被他人查看*/
a:visited{
    color: yellow;
    background-color: red;
    font-size: 500px;
}

/* :hover 鼠标悬浮时 元素的样式 */
a:hover{
    color: pink;
}

/* :active 点击未松开时 文字的样式 */
a:active{
    color: blue;
}

/* :hover 和 :active 可以用在其他元素上 */
div:active{
    color: red;
}

因为我都访问过了，浏览器有缓存，所以都是访问过后的颜色
在这里插入图片描述

要记住，CSS规定了hover一定要用在link、visited之后！！！