【经验】在CSS中定义a link、a visited、a hover、a active顺序_alink a hover

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

代码

A:link 
{

color
:
 #000000
;

TEXT-DECORATION
:
 none

}

A:visited 
{

COLOR
:
 #000000
;

TEXT-DECORATION
:
 none

}

A:hover 
{

COLOR
:
 #ff7f24
;

text-decoration
:
 underline
;

}

A:active 
{

COLOR
:
 #ff7f24
;
  
 text-decoration
:
 underline
;

}

今天看到一位匿名朋友的问题，又去查了一些资料，这个人讲的非常透彻：引自灵眸●第一炉沉香博客

a :link、a:hover、a:visited这几个元素，定义CSS时候的
顺序不同，也会直接导致链接显示的效果不同。

我想，原因就在于浏览器解释CSS时遵循的“就近原则”。

举例来说：

我想让未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色：

• 第一种情况：我定义的顺序是a:visited、a:hover、a:link，这时会发现：把鼠标放到未访问过的蓝色链接上时，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿。
• 第二种情况：我把CSS定义顺序调整为：a:link、a:visited、a:hover，这时，无论你鼠标经过的链接有没有被访问过，它都会变成绿色啦。

这是因为，
一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。

在第二种情况，无论链接有没有被访问过，它首先要检查是否符合a:hover的标准（即是否有鼠标经过它），满足，则变成绿色，不满足，则继续向上查找，一直找到满足条件的定义为止。

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**