我正在阅读有关 CSS 伪类的内容,并且遇到了:link
伪类。
大家都说:link
伪类匹配具有“href”属性的链接元素and还没有被访问过。
当我检查时,第一个条件是正确的,但显然第二个条件(仅匹配未访问的链接)不是这种情况(至少对于 Google Chrome),如下图所示:
![Google Chrome Dev Tools](https://i.stack.imgur.com/ZXyLO.png)
这里发生了什么?
这有点令人困惑,但如果你参考规格你会找到:
因此UA可以治疗所有链接均为未访问链接,或实施其他措施保护用户的隐私同时以不同方式呈现已访问和未访问的链接。
这就是这里正在发生的事情。诀窍是创建一些限制以避免出现big已访问链接和未访问链接的样式之间的差异。
从技术上讲,您将应用的所有样式a:link
也将适用于a:visited
除非你在里面重写它们a:visited
并且您只能使用内部可以应用的样式:visited
所以你不能覆盖一切:
您可以设置已访问链接的样式,但可以使用的样式有限制。仅以下样式可以应用于访问的链接:
- color
- 背景颜色
- 边框颜色(及其子属性)
- 列规则颜色
- 轮廓颜色
- 填充和描边属性的颜色部分
In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword. ref
下面举个例子来说明:
a:link {
font-size:50px;
border:2px solid red;
color:black;
padding:20px;
box-shadow:5px 5px 0 blue;
display:inline-block;
margin:10px;
}
a:visited {
color:red; /* this will work */
border:5px dotted green; /* only the color will work */
background:black; /* This will not work because we cannot change transparent to opaque value */
/*All the below will not work*/
padding:0;
box-shadow:-5px -5px 0 purple;
display:inline;
margin:9584px;
font-size:10px;
}
<a href="www.something.comg">not visited</a>
<a href="#">visited</a>
我们只能将行为从已访问更改为未访问。基本上,我们只允许改变一些颜色。
From this you can also conculde that a:link
is almost1 the same as a
. The difference is that the first one will only target links with href
specified
1: a:link
or :link
remain more specific than a
:link {
font-size:40px;
}
a {
font-size:10px;
}
<a href="#">a link</a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)