CSS代码如下:

a:link{color: red;}
a:visited{color: blue;}
a:hover{color: green;}
a:active{color: purple;}

html代码如下:

<ul>
    <li><a href="#">锄禾日当午</a></li>
    <li><a href="#">汗滴禾下土</a></li>
    <li><a href="#">谁知盘中餐</a></li>
    <li><a href="#">粒粒皆辛苦</a></li>
</ul>

然后在网页刚打开时, 文字显示效果如下:

9074069B-4967-40BA-8249-DE1C0DA6D8EB.png

按说在链接没有被点击的时候文字应该是红色的, 然而这里显示的确实蓝色.

对html代码修改如下:

<ul>
    <li><a href="https://wwww.baidu.com">锄禾日当午</a></li>
    <li><a href="#">汗滴禾下土</a></li>
    <li><a href="#">谁知盘中餐</a></li>
    <li><a href="#">粒粒皆辛苦</a></li>
</ul>

这次发现第一行文字的显示效果是预期的样式, 出现link与visited冲突的原因是a标签的链接有问题, 简单试过各种链接之后, 发现之后链接为空或者只是一个'#'时会出现这种情况, 至于还有没有别的方式触发这个问题就不知道了

链接无效还会使a的visited设置无效, 这是因为链接点击后没有产生网页访问的历史记录, 所以链接点击后无效

另外, 对于我这种HTML小白来说, 伪类的书写顺序也是固定的这一点需要谨记, 话说好奇怪啊.