weiter 发表于 2020-3-3 22:10:57

关于：link

本帖最后由 weiter 于 2020-3-4 07:30 编辑

不造为什么我在程序里已经按照实例加了:link，但是不知道为什么:link好像失效了,以下是代码和效果，求大佬解惑{:5_100:}
我是想改一下a标签的链接的颜色，但是好像没有用。。。


HBX.html
<!DOCTYPE html>
<html>
      <head>
                <meta charset="utf-8">
                <title>HBuilder X</title>
                <link rel="icon" type="image/png" sizes="16x16" href="HBX.png">
                <style type="text/css">
                        h1{
                              background-color: #F5F5DC;
                              color: #8FBC8F;
                              margin: 0;
                              padding: 5%;
                        }
                        p{
                              color: #F5F5DC;
                              background-color: #8FBC8F;
                              margin: 0;
                        }
                        a{
                              background-color: beige;
                              width: 100px;
                              margin: auto;
                        }
                        section{
                              color: #8FBC8F;
                              padding: 20px;
                              display: flex;
                              flex-direction: row;
                        }
                        ::selection{
                              background-color: silver;
                              color: white;
                        }
                        div:hover{
                              background-color: burlywood;
                              color: #F5F5DC;
                        }
                        /*问题代码*/
                        a:link{
                              color: darkgoldenrod;
                        }
                </style>
      </head>
      <body>
                        <h1>Hbuilder X</h1>
                        <p class="show">thank you for useing <dfn>HBuilder X</dfn></p>
                        <p class="show">感谢您使用<dfn>HBuilder X</dfn></p>
                        <section class="section1">
                              <a href="1.html"><div>first</div></a>
                              <a href="1.html"><div>second</div></a>
                              <a href="1.html"><div>third</div></a>
                        </section>
                        <section class="section2">
                              <a href="1.html"><div>one</div></a>
                              <a href="1.html"><div>one</div></a>
                              <a href="1.html"><div>one</div></a>
                        </section>
      </body>
</html>


1.html
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>HBuilder X</title>
                <link rel="icon" type="image/png" sizes="16x16" href="HBX.png">
        </head>
        <body>
                <p>开学啦</p>
        </body>
</html>

wp231957 发表于 2020-3-4 06:52:58

两段代码？？？什么情况

weiter 发表于 2020-3-4 07:29:19

wp231957 发表于 2020-3-4 06:52
两段代码？？？什么情况

下面的<a>就是跳转到第二段代码的

wp231957 发表于 2020-3-4 08:06:30

weiter 发表于 2020-3-4 07:29
下面的就是跳转到第二段代码的

你想修改哪个颜色啊   我测试代码没问题啊

不二如是 发表于 2020-3-4 08:21:03

小甲鱼老师关于 link，visited、hover、active 有讲过顺序问题（初学CSS的噩梦（II））：
LoVe & HAte

这四个元素是有使用顺序滴，颠倒就无法执行想要的效果

wp231957 发表于 2020-3-4 08:29:52

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}/* 已访问链接 */
a:hover {color:#FF00FF;}/* 鼠标移动到链接上 */
a:active {color:#0000FF;}/* 鼠标点击时 */

教程上是这个顺序的

sukiwhip 发表于 2020-3-4 10:07:56

感觉你的 a标签 都好像被点过一样，开一个纯浏览器或者无痕模式看看对比下
你用开发者模式查一下现在标签的颜色是什么，看看伪类的颜色是什么
也可以试一下加大伪类的权重

liuzhengyuan 发表于 2020-3-4 11:26:53

顺序错了，link必须放hover前面

weiter 发表于 2020-3-4 11:40:21

liuzhengyuan 发表于 2020-3-4 11:26
顺序错了，link必须放hover前面

我试一下

weiter 发表于 2020-3-4 11:40:56

liuzhengyuan 发表于 2020-3-4 11:26
顺序错了，link必须放hover前面

但是设置背景色却可以

weiter 发表于 2020-3-4 11:45:55

sukiwhip 发表于 2020-3-4 10:07
感觉你的 a标签 都好像被点过一样，开一个纯浏览器或者无痕模式看看对比下
你用开发者模式查一下现在标签 ...

无痕模式可以正常显示，但是为什么？

weiter 发表于 2020-3-4 11:46:44

liuzhengyuan 发表于 2020-3-4 11:26
顺序错了，link必须放hover前面

谢谢指正
页: [1]
查看完整版本: 关于：link