今天学到一个有趣的新知识呢, 迫不及待的想分享一下. 自学前端的这条路上, 还在基础部分打转, 未来好难, 走好现在脚下的每一步才是我现在最重要的. 小小地感慨一下, 下面进入正题吧.
1. <a> 标签
我们先说一说 < a > 标签是干啥用的.
- <a> 标签定义超链接, 用于从一张页面链接到另一张页面.
- <a> 元素最重要的属性是 href 属性, 它指示链接的目标.
在所有浏览器中, 链接的默认外观是:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
<a > 标签还有一个很重要的属性: target, 它用于规定在何处打开链接文档, 取值有:_blank;_parent;_self;_top. 这个我后面也会小小地总结一下.
2.a 链接的四种状态
伪类是 CSS 用于向某些选择器添加特殊的效果.
a 标签中有四个: link,visited,hover,active
(1)link
说明: 设置 a 对象在未被访问前的样式表属性.
(2)visited
说明: 设置 a 对象在其链接地址已被访问过时的样式表属性.
(3)hover
说明: 设置对象在其鼠标悬停时的样式表属性.
(4)active
说明: 设置对象在被用户激活 (在鼠标点击与释放之间发生的事件) 时的样式表属性.
定义 CSS 时候的顺序不同, 也会直接导致链接显示的效果不同. 原因可能在于浏览器解释 CSS 时遵循的 "就近原则". 正确的顺序: a:link,a:visited,a:hover,a:active
解释:
link: 连接平常的状态
visited: 连接被访问过之后
hover: 鼠标放到连接上的时候
active: 连接被按下的时候
举例来说:
我想让未访问链接颜色为蓝色, 活动链接为绿色, 已访问链接为红色:
第一种情况: 我定义的顺序是 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 的标准(即是否有鼠标经过它), 满足, 则变成绿色, 不满足, 则继续向上查找, 一直找到满足条件的定义为止.
一句话: 在 CSS 中, 如果对于相同元素有针对不同条件的定义, 宜将最一般的条件放在最上面, 并依次向下, 保证最下面的是最特殊的条件. 这样, 浏览器在显示元素时, 才会从特殊到一般, 逐级向上验证条件, 才会使你的每一个 CSS 语句都起到效果. 当然, 如果故意打乱顺序, 也会造成一些特殊的效果. 比如, 可以为链接制造出下划线颜色与文字颜色的差异.
其实这个 CSS 问题早已有高人提出啦, 还是个老外呢. 他给总结了一个便于记忆的 "爱恨原则"(LoVe/HAte), 即四种伪类的首字母: LVHA.
再重复一遍正确的顺序: a:link,a:visited,a:hover,a:active .
最后经验补充:
1. 鼠标经过的 "未访问链接" 同时拥有 a:link,a:hover 两种属性, 后面的属性会覆盖前面的属性定义;
2. 鼠标经过的 "已访问链接" 同时拥有 a:visited,a:hover 两种属性, 后面的属性会覆盖前面的属性定义;
来源: https://www.2cto.com/kf/201806/757451.html