CSS伪类，a标签超链接实现点击后变色-蒲公英云

CSS伪类，a标签超链接实现点击后变色

一、html 代码如下

<a href="http://www.qq.com" class="red" target="_blank">超链接1</a> <br>
<a href="http://www.qq.com" class="red" target="_blank">超链接2</a><br>
<a href="http://www.qq.com" class="red" target="_blank">超链接3</a><br>
<a href="http://www.qq.com" class="red" target="_blank">超链接4</a><br>

二、css代码如下

<style type="text/css">
    a:link {
        color: yellow; /*未访问的链接颜色*/
    }
    a:visited {
        color: red; /*已访问的链接颜色*/
    }
    a:hover {
        color: blue; /*鼠标移动到链接的颜色*/
        text-decoration: underline;
    }
    a:active {
        color: orange; /*鼠标点击时的颜色*/
    }
    a {
        text-decoration: none; /*去掉下划线*/
    }
</style>

三、补充一个隔行变色的效果

<!-- css 样式部分 -->
<style>
    p:nth-child(even) {
        background: yellow; /*偶数行变色，黄色*/
    }
    p:nth-child(odd) {
        background: red; /*奇数行颜色，红色*/
    }
</style>
<!-- html 代码部分 -->
<h1>
    <p>一个段落 1</p>
    <p>一个段落 2</p>
    <p>一个段落 3</p>
    <p>一个段落 4</p>
    <p>一个段落 5</p>
    <p>一个段落 6</p>
    <p>一个段落 7</p>
</h1>