为什么:在伪元素不使用之前:访问伪类？
我正在尝试用伪类和伪元素来构造元素的样式。就像hover::before一样，它工作得很好，但:visited::before却不能工作。
如果访问了链接，但:visited::before不起作用，我想显示“已见”链接。
*, *:before, *:after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-size: 23px;
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
.style-3 {
margin: 20px;
float: left;
padding: 20px 80px 20px 20px;
border: 1px solid #ccc;
background-color: #fff;
position: relative;
text-decoration: none;
}
.style-3 {
color: green;
}
.style-3:visited {
color: red;
}
.style-3:hover::before {
content: "Hover";
position: absolute;
right: 20px;
color: yellow;
}
.style-3:visited::before {
content: "Seen";
position: absolute;
right: 20px;
color: blue;
}<a href="#1" class="style-3">Seen Effects</a>
<a href="#2" class="style-3">Seen Effects</a>
<a href="#3" class="style-3">Seen Effects</a>
回答 4
Stack Overflow用户
发布于 2015-06-16 05:47:26
注意:出于隐私原因，浏览器严格限制您可以使用此伪类选择的元素应用的样式:只使用颜色、背景色、边框颜色、边框-底部颜色、边框-左颜色、边框-右颜色、边框-顶部颜色、轮廓颜色、列规则颜色、填充和笔画。
Idea 1:创建子元素并为其编写CSS
<a href="#1" class="style-3">Seen Effects<span>Seen</span></a>
<a href="#2" class="style-3">Seen Effects<span>Seen</span></a>
<a href="#3" class="style-3">Seen Effects<span>Seen</span></a>
*, *:before, *:after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-size: 23px;
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
.style-3 {
margin: 20px;
float: left;
padding: 20px 20px 20px 20px;
border: 1px solid #ccc;
background-color: #fff;
position: relative;
text-decoration: none;
}
.style-3 {
color: green;
}
.style-3:visited {
color: red;
}
.style-3 span{
color: #fff;
margin-left: 20px;
}
.style-3:visited span{
color: #ccc;
margin-left: 20px;
}小提琴https://jsfiddle.net/ZigmaEmpire/do8yeLm1/
Idea 2:创建一个与背景颜色匹配的透明背景图像，并更改访问的背景色(不推荐)
Stack Overflow用户
发布于 2015-06-15 17:39:42
这也许是可能的，但不要认为这是理所当然的。根据等级库的说法
注意:样式表作者可以滥用:链接和:访问伪类，以确定用户未经用户同意访问了哪些站点。 因此，UAs可以将所有链接视为未访问的链接，或者实施其他措施来保护用户的隐私，同时以不同的方式呈现访问链接和未访问链接。
插入内容可能会改变元素的大小，因此检测该内容并知道用户是否访问过某些站点是非常简单的。因此，大多数浏览器都不允许您这样做。
Stack Overflow用户
发布于 2015-06-24 19:12:53
如果您旁边有一个跨度，这是很容易的：
*, *:before, *:after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-size: 23px;
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
.seen {
margin: 20px;
float: left;
padding: 20px 20px 20px 20px;
border: 1px solid #ccc;
background-color: #fff;
position: relative;
text-decoration: none;
}
.seen {
color: green;
}
.seen:visited {
color: red;
}
.seen + span {
color: #fff;
margin-left: 20px;
}
.seen:visited + span {
color: #ccc;
margin-left: 20px;
}<a href="#1" class="seen">Seen Effects</a> <span>Seen</span>
<a href="#2" class="seen">Seen Effects</a> <span>Seen</span>
<a href="#3" class="seen">Seen Effects</a> <span>Seen</span>
这在Chrome中不起作用，但在Chrome中有效！
https://stackoverflow.com/questions/30851064
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号