超链接伪类（a标签伪类选择器）

已于 2022-07-31 08:54:47 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端css基础 文章标签： css 前端 html
于 2022-07-11 20:52:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125729977
版权

目录

一、常见使用

1、使用规范

2、常用伪类

二、代码实例

一、常见使用

1、使用规范

a+:+伪类名+{}，加号可忽略

2、常用伪类

（1）a:link

表示为正常链接，狭义认为是未被访问的链接

a:link{color: blue;}

（2）a:visited

表示已经被访问的链接，其中只有属性color能用，原因是为了保护隐私

a:visited{color: red;}

（3）a:hover

表示鼠标移动到链接框的状态

a:hover{color: skyblue;}

（4）a:active

表示鼠标点击链接后的状态

a:active{color: orange;}

二、代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>超链接伪类</title>
        <style>
            /* 未被访问，正常链接 */
            a:link{
                color: blue;
            }
            /* 已经被访问 */
            a:visited{
                color: red;
            }
            /* 设置移动到框内的状态 */
            a:hover{
                color: skyblue;
            }
            /* 点击后的状态 */
            a:active{
                color: orange;
            }

        </style> 
    </head>
    <body>
        <a href="https://www.baidu.com">这是百度的链接</a>
        <a href="outline_table.html">这个链接未被访问</a>
    </body>

</html>

comegoing-归去兮来
关注
专栏目录
css伪类（超链接）
11-08
css伪类 超链接 连接的用法 描述 link的样式说明
a标签伪类的作用及书写顺序是什么
09-28
为了在用户交互过程中改变`<a>`标签的视觉效果，CSS提供了四种伪类选择器，分别是`:link`、`:visited`、`:hover`和`:active`，这些伪类可以组合应用以实现不同状态下的样式变化。本文将详细探讨这些伪类的作用以及...
超链接伪类选择器
weixin_61940154的博客
10-15 726
超链接伪类，节点伪类，结构伪类 的选择器
joshuacty的博客
07-06 332
1，超链接伪类 a:link{ } 访问前样式， a:hover{ } 移上去的样式 a:active{ } 点击时的样式 a:visited{ } 点击后的样式 2，节点伪类 p::first-letter{} 第一个字 p::first-line{} 第一行 p:first-child{ } 第一个元素 3，结构伪类 p:nth-child(){} 从第一个开始数 元素 p:nth-last-child(2n-1){} 从后往前数 元
HTML5第六课时，超链接，伪类选择器
甲戌天火的博客
04-19 1016
html> html> head lang="en"> meta charset="UTF-8"> title>超链接,伪类选择器title> style> /*伪类选择器，必须按照以下的顺序去写，l,v,h,a*/ a:link{/*1.默认的链接状态。未访问状态。*/ color: pink;
a标签的四个css伪类(link、visited、hover、active)样式理解
09-25
在CSS中，伪类是一种特殊的选择器，用于定义元素的特殊状态。对于HTML中的a标签，CSS提供了一组特定的伪类，即link、visited、hover和active。这些伪类用于定义a标签在不同状态下的样式表现，从而提升用户的交互体验...
css伪类伪元素域高级选择器的介绍
09-25
### CSS伪类、伪元素与高级选择器详解 #### 一、CSS伪类与伪元素概述 CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它提供了丰富的选择器来帮助开发者更加灵活地控制页面元素。其中，**伪类**和**伪元素...
CSS中a标签样式的“爱恨”原则：定义链接样式的四个伪类
09-25
伪类是一种特殊的类选择器，用于指定元素的某种状态。对于`<a>`标签（锚标签）而言，以下是定义链接样式的四个重要伪类： 1. `a:link`：用于定义超链接（`<a>`标签）在正常情况下的样式，即用户尚未访问过的链接。...
HTML-超链接伪类
m0_62349010的博客
02-16 3431
一、访没访问过超链接是超链接的两种状态 二、超链接伪类的四个类型 1.:link ---没访问过的链接 2.:visited---访问过的链接 3.:hover---鼠标移入的状态 4.:active---点击时的状态 三、用法
a标签伪类选择器
qq_48858031的博客
07-13 601
a标签存在一定的状态1.默认状态，未被访问过2.被访问过的状态3.鼠标长按的状态4.鼠标悬停在a标签上的状态a标签伪类选择器作用：a标签的伪类选择器是专门用来修改a标签不同状态的样式的格式：修改从未访问过状态下的样式a：link{ 属性：值；}修改被访问过的状态下的样式a：visited{ 属性：值；}修改鼠标长按状态下的样式a：active{ 属性：值；}修改鼠标悬停时的样式a：hover{ 属性：值；}注：1.a标签的伪类选择器可以单独出现也可以一起出现，如果一起出
CSS基础2-超链接伪类
diajiu9420的博客
02-06 382
模块回顾 1.背景图片的设置 2.超链接伪类 一、背景图片的设置 1.整个页面的背景图片插入 在类标签body中直接插入，例如：body{background-image:url(../Day02-HTML/html/海贼王02.jpg);} 还可以调试它的效果，是否重复，是否随页面滚动，调动位置。例如： body{ background-image:url(../Da...
CSS选择器：伪类（图文详解）
weixin_34075268的博客
01-13 881
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”...
CSS|超链接伪类
Alan_Lowe
07-27 333
CSS|超链接伪类 CSS： /*表示超链接访问前的样式*/ a:link{ color: #000000; } /*鼠标悬停时的样式*/ a:hover{ color: blue; font-size: 20px ; } /*鼠标点击不放时的样式*/ a:active{ color: yellow; } /*访问过后的样式*/ a:visited{ color: red; } HTML： <!DOCTYPE html> <html lang="
CSS:超链接伪类
yiXin_Chen的博客
12-23 2028
超链接伪类: a:link, 设置超链接基础样式 a:visited, 设置超链接点击过的样式 a:hover, 设置鼠标悬停在上方时的样式 a:active, 设置鼠标点击中的样式 其它标签常用的伪类 :hover :active 示例: .t1 a:hover{ color: yellow; } .t1 a:active{ color: green; } ...
CSS超链接伪类
最新发布
qq_74095822的博客
12-18 1420
伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值