一个页面用几种超级连接样式：还要注意顺序，visited 要在 hover 之前。

最新推荐文章于 2020-09-08 16:57:36 发布

lzid2008

最新推荐文章于 2020-09-08 16:57:36 发布

阅读量1k

点赞数

分类专栏： Css 文章标签： class c

本文链接：https://blog.youkuaiyun.com/lzid2008/article/details/1106172

版权

Css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用CSS来设置网页中链接的各种样式效果，包括去除默认下划线、改变颜色及实现虚线下划线等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a.c1:link {
text-decoration: none;
color: #FFFF00;
}
a.c1:visited {
text-decoration: none;
color: #FFFF00;
}
a.c1:hover {
color: #0000FF;
text-decoration: underline;
}

</style>

==============================================

看到一些网页的的连接下划线是虚线，这是怎么做的？

虚线这么来的：
a:hover {...
border-bottom-style: dotted;
...
}

solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮凸框*/
inset /*凹框*/
outset /*凸框*/

=====================文本和下划线颜色不一

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lzid2008

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML代码实例：详细讲解超级链接--网页制作

gxj022的专栏

09-23

6247

【转】http://www.webjx.com/html-xhtml/webxhtml-10153.html 超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。— 注意：图片也可以做链接，将在下一章“网页中的图片”详细学习。 4.5.1 给文

使用CSS伪元素控制连续几个元素的样式

我欲乘风破浪

03-23

1702

用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式，网上有许多博客都说了如何去控制一个的改变，但是我在实际写的过程中，发现更多时候是需要控制多个连续元素的改变。使用伪元素去控制（以:hover为例），当鼠标停留在A时，BCD.....样式的改变 A与BCD....是相邻同级关系，要求A在BCD的最上面 <div class="A"></div> <di...

参与评论您还未登录，请先登录后发表或查看评论

a:hover和a:visited书写顺序的重要性

abc0412的博客

12-05

290

今天在用a:hover属性的时候发现一个奇怪的问题，同一个页面里面有些链接的a:hover效果不能正常表现出来。链接的代码是一样，没有使用其它样式固定，搞的我莫名其妙。还以为是某个标签没有关闭，但是页面比较长，检查起来又嫌累，但是想来想去找不到其它原因，索性把浏览器一关，做别的事情去了。重新打开这个页面的时候，突然发现那个链接的a:hover效果又出来了。我想了一下，点了那个链接...

有关css伪类visited样式无效的解决方法

weixin_30684743的博客

02-24

500

错误写法将visited写在hover和active之后，例如： .ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color:#00891f;color:#FFF;text-shadow: 0 1px 0 #00a325;} .ui-page-theme-a .digilinx-ui-btn:hover{b...

Sharepoint 2013 Client Render

04-30

816

http://www.rbradbrook.co.uk/sharepoint-2013/introduction-to-client-side-rendering-in-sharepoint-2013/

【牛腩】--问题总结

Up！Up！Up！

09-30

612

一、visited和:link样式只能在颜色上不同。有些样式未应用于 :visitde; 原因：css文件中出现不能被浏览器兼容的标签元素（一般为拼写错误）解决办法：检查修改link，hover，active，visited等标签中的内容。二、当前上下文不存在Eval 原因：红框中的命名有错误。这个问题出现的比较莫名其妙，一不小心多加了一个字母，或者不加Web.就会报这个错 ...

谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序

热门推荐

薰衣草PK向日葵的博客

01-18

4万+

今天学到一个有趣的新知识呢，迫不及待的想分享一下。自学前端的这条路上，还在基础部分打转，未来好难，走好现在脚下的每一步才是我现在最重要的。小小地感慨一下，下面进入正题吧。 1. <a>标签我们先说一说<a>标签是干啥用的。 <a> 标签定义超链接，用于从一张页面链接到另一张页面。 <a> 元素最重要的属性是 href 属性...

同时设置伪类样式a:link和a:visited，a:link样式被a:visited样式覆盖问题

qq_41270983的博客

12-02

1370

根据爱恨原则，正常书写顺序如下 :link :visited :hover :active 问题同时设置伪类样式 a:link 和 a:visited ，在超链接未被访问时，a:link 样式无效，取而代之的是 a:visited 的样式解决 <a> 元素的 href 属性，必须有值清除浏览器缓存 <h2> 未正确书写链接地址时，a:lin...

IE7,6与Fireofx的CSS兼容性处理方法大全

weixin_33908217的博客

07-17

CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声明. CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个D...

html 超链接样式设置（link;visited;hover;active）

AnneQiQi的博客

04-26

1万+

//去掉超链接下划线： style="text-decoration: none;" //链接平常样式 a:link { font-size: 10pt; color: #0000cc; font-family: 宋体; text-align: left; text-decoration: underline; TE

应用于<a>标签的伪类选择器（link、visited、active、hover）

qq_35768238的博客

04-16

2571

CSS3根据选择符的用途可以把选择器分为标签选择器，类选择器，ID选择器，全局选择器，组合选择器，继承选择器和伪类选择器等。伪类选择符定义的样式最常应用于<a>标签上，它表示4种不同的状态：link（未访问链接）、visited（已访问链接）、active（激活链接）、hover（鼠标停留在链接上）。<a>标签可以只有一种状态link，或者同时具有两种或这三种...

css伪类的使用和注意事项

Gnemoah6的博客

09-08

389

css伪类的使用和注意事项 1）伪类的介绍伪类的使用大多都是服务于a标签，使得a标签在页面上有更好的展示效果，我们可以通过一些伪类来描述一个元素的状态。 2）常见的伪类 :link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素，鼠标点着不放； :visited 应用于被访问过的链接，与:link互斥。 3）代码的展示 :hover 当鼠标在元素上悬停时元素颜色变红 ul li a:hover{ color: red;

3.html5建立超链接

small_rain_的博客

08-13

4428

超链接就是鼠标点击一些文件、图片或者其他网页元素时，浏览器会根据指示载入新的网页或者跳转到页面的其他位置超链接可以链接文本以外，还可以链接各自媒体，声音、图像、动画等。 1.URL的概念 URL为Uniform Resource Locator的缩写，翻译为“统一资源定位器”，即“网址”。互联网上的每个文件都有一个唯一的URL，包含的信息指出文件的位置以及浏览器应该怎样

1. :link 超链接未被访问的状态。2. :visited 超链接访问过的状态。3. :hover 鼠标悬停在元素上的状态。4. :active 元素激活的状态。5. :focus 获取焦点的元素。

最新发布

03-20

### CSS伪类的定义与用法 #### 定义 CSS伪类是一种用于选择特定状态下HTML元素的选择器。它们允许开发者针对不同的用户交互状态应用样式，从而增强用户体验。 - **`:link`**: 表示尚未被访问过的超链接[^1]。 - **`:visited`**: 表示已被访问过的超链接。需要注意的是，在现代浏览器中出于隐私保护的原因，对`:visited`样式的控制有限制[^3]。 - **`:hover`**: 当用户的鼠标悬浮在一个元素上时触发该状态。这不仅限于 `<a>` 标签，还可以应用于其他任何 HTML 元素。 - **`:active`**: 用户单击并按住某个元素（通常是链接）时的状态[^2]。它通常用来模拟按钮按下效果。 - **`:focus`**: 当一个元素获得键盘焦点时生效，比如通过 Tab 键导航到表单字段或其他可聚焦控件时。 #### 使用方法以下是这些伪类的具体使用方式： ```css /* 未访问链接 */ a:link { color: blue; } /* 访问过后的链接颜色 */ a:visited { color: purple; } /* 鼠标悬停时改变背景色 */ a:hover { background-color: yellow; } /* 单击激活时的文字加粗 */ a:active { font-weight: bold; } /* 输入框获取焦点时边框变红 */ input:focus { border-color: red; } ``` 为了确保不同状态之间的层叠顺序正常工作，推荐按照以下逻辑排列声明：LVHA (Link → Visited → Hover → Active)[^2]。另外值得注意的是 `:focus` 常常会独立放置因为它适用于更多类型的元素而不仅仅是锚点标签。 #### 示例代码展示下面是一个综合运用上述几种伪类的例子来设计简单的按钮行为: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Pseudo-class Example</title> <style> button{ padding:10px 20px; margin:5px; cursor:pointer; transition:.3s all ease-in-out; } button:link, button:visited { background:#fff; color:black; } button:hover { background:greenyellow; color:white; } button:active { transform:scale(.9); box-shadow:none; } button:focus { outline:solid thin orange !important;} </style> </head> <body> <button type="button">Click Me!</button> </body> </html> ``` 在这个例子中我们创建了一个带有基本样式的按钮，并分别设置了其在默认、已访问、悬停以及活动四种情况下的表现形式；同时还特别处理了当这个按钮接收到键盘输入焦点时候高亮显示的效果。 ---