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小白来说, 伪类的书写顺序也是固定的这一点需要谨记, 话说好奇怪啊.
