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

左手的ㄟ右手 2021-12-19 22:01 323阅读 0赞

##                              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>

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

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

参考资料：[https://www.runoob.com/css/css-pseudo-classes.html][https_www.runoob.com_css_css-pseudo-classes.html]

[https_www.runoob.com_css_css-pseudo-classes.html]: https://www.runoob.com/css/css-pseudo-classes.html

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关 html的超链接标签 a

超链接标签的学习和所做知识梳理

蔚落/ 2024年05月06日 21:22/ 0 赞/ 63 阅读

相关超链接标签

![5d2dae599bc64173f64691e9bed60253.png][] <!DOCTYPE html> <html> <h

谁践踏了优雅/ 2023年10月03日 22:53/ 0 赞/ 13 阅读

相关 HTML a标签链接设置点击下载文件

通常情况下，为文件添加链接后，用户可以通过点击链接，直接将文件下载到本地，如下载 excel 表格等 <a href="/user/test/xxxx.excel">

淩亂°似流年/ 2023年05月22日 22:40/ 0 赞/ 17 阅读

相关关于超链接a的四个伪类的顺序问题

a的四个伪类 link:代表打开页面超链接的原始状态 visited:链接被访问过后的状态 hover:鼠标悬停在超链接上的状态 active:当鼠标被按下去的

短命女/ 2023年02月14日 01:19/ 0 赞/ 31 阅读

相关在iframe里点击超链接

![SouthEast][] <html> <head> </head> <body> <iframe src="sub

短命女/ 2022年08月12日 12:00/ 0 赞/ 171 阅读

相关链接<a>标签

标签a一共有四个状态 hover 鼠标悬停在链接的状态 visited 链接被访问后的状态 active 链接被按下的时候的状态 link

末蓝、/ 2022年08月05日 05:26/ 0 赞/ 168 阅读

相关点击a标签触发点击事件后下载文件

a标签 <a></a> a标签下载文件 <a download="filename" id="a_downloadPdf" href="文件地址">点击下载</a

太过爱你忘了你带给我的痛/ 2022年05月16日 13:23/ 0 赞/ 651 阅读

相关 JS 实现点击按钮实现超链接功能

url = '/webroot/decision/view/report?viewlet=InshipOutship/Outship.frm'; 新窗口打开报表：window

我就是我/ 2022年01月10日 11:07/ 0 赞/ 1683 阅读

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

CSS伪类，a标签超链接实现点击后变色一、html 代码如下 <a href="http://

左手的ㄟ右手/ 2021年12月19日 22:01/ 0 赞/ 324 阅读

相关 css去掉a标签点击后的虚线框

[css去掉a标签点击后的虚线框][css_a] outline是css3的一个属性，用的很少。声明，这是个不能兼容的css属性，在ie6、ie7、遨游浏览器都不兼容

野性酷女/ 2021年09月26日 14:18/ 0 赞/ 402 阅读