【学习笔记】CSS伪类，a标签超链接实现点击后变色

本文链接：https://blog.csdn.net/qq_44940503/article/details/112133728

一、html 代码如下

<a href="https://www.layui.com/" class="red" target="_blank">超链接1</a> <br>
<a href="https://www.layui.com/" class="red" target="_blank">超链接2</a><br>
<a href="https://www.layui.com/" class="red" target="_blank">超链接3</a><br>
<a href="https://www.layui.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>