HTML中a标签在不同状态下的样式

CSS, HTML / 2021年6月25日 / hamster

代码如下：

<p>
    <a href="#" target="_blank">书库</a>
    <a href="#" target="_blank">书库</a>
    <a href="#" target="_blank">书库</a>
    <a href="#" target="_blank">书库</a>
    <a href="#" target="_blank">书库</a>
    <a href="#" target="_blank">书库</a>
</p>

效果如下：

首先去除下划线

<style>
    a{
        text-decoration: none;
    }
</style>

效果如下：

接着修改标签颜色

<style>
    a{
        text-decoration: none;
        color: red;
    }
</style>

效果如下：

a标签有四种状态，分别是未点击时，点击时，点击后，鼠标经过时。

按上述代码，不管标签变更哪种状态，样式都不会发生改变。

若想让a标签不同状态下展示不同样式，代码如下：

<style>
    a{
        text-decoration: none;
    }
    a:link{
        color: red;
    }
    a:visited{
        color: blue;
    }
    a:hover{
        color: green;
    }
    a:active{
        color: yellow;
    }
</style>

效果如下：

a:link 代表未点击时的状态

a:visited 代表点击后的状态

a:hover 代表鼠标经过时的状态

a:active 代表点击时的状态

切记：一定要将a:hover放在a:link 和a:visited 之后，否则会影响展示效果

注意：在你按照上述代码进行测试时，或许会发现a:link定义的颜色不起作用，只显示a:visited定义的颜色效果。

之所以如此的原因，与缓存有关，浏览器已经记录了你点击标签的举动，所以才只显示点击后的效果，清除浏览器缓存即可。

a标签