CSS入门中，关于伪类“a:link”、“a:hover”有些疑问。

1、为什么伪类“a:link”Chrome浏览器下刷新后不重置为红色？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*未访问的链接*/
        a:link{
            color: red;
        }
        /*已访问的链接*/
        a:visited{
            color: blue;
        }
        /*鼠标悬浮在连接上*/
        a:hover{
            color: green;
        }
        /*雪顶的链接*/
        a:active{
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#">链接伪类</a>
</body>
</html>

2、为什么伪类“a:hover”也有下划线，继承性吗，能按顺序向后继承？如果是颜色为什么不继承？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            color: #333;
            text-decoration: none;
        }

        a:hover{
            color: #FA0000;
        }
    </style>
</head>
<body>
    <a href="#">品牌闪购</a>
</body>
</html>

童真模式启动 2021-10-12

源自：CSS入门 6-4 伪类

收起

1回答

好帮手慕小脸 2021-10-12 13:14:19

同学你好，

1、a:link不会设置已经访问过的链接的样式，这里浏览器已经访问过了该样式，若要回到初始的红色，需要同学清除浏览器缓存

2、默认情况下链接是有下划线的，这里已经给a标签设置了移出(text-decoration: none;）所以上述贴出代码

“a:hover”没有下划线

祝学习愉快~

收起回答

提问者童真模式启动 #1

做active操作时，但未书写a:active，也出现了下划线，这是因为伪类也存在继承性？
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            color: #333;
            text-decoration: none;
        }
        a:hover{
            color: #FA0000;
            text-decoration: underline;
        }
        div:hover{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">品牌闪购</a>
    <div>div伪类测试</div>
</body>
</html>

2021-10-13 11:50:04
好帮手慕小脸回复提问者童真模式启动 #2

同学你好，
1、active 选择器用于选择活动链接，当在一个链接上点击时，它就会成为活动的。
而hover 选择器用于设置鼠标指针浮动到链接上时的样式。
2、上述贴出代码并不是执行了active 出现的下划线，而是你在设置hover选择器时，添加了下划线，也就是如下代码：

这里你可以自己去掉这一行再试试！注：underline:定义文本下的一条线。
祝学习愉快~

2021-10-13 13:18:48