Question

我需要在访问链接时更改邻近元素的样式：

a:visited + div { color: #000 }

这不起作用。我能做些什么来获得我需要的造型？

Answer 1

我没有在Specs中找到任何内容，但是明确禁止兄弟组合器使用这个伪类，但是：

:visited伪类是一种特殊情况，因为它可能被滥用来侵犯用户隐私。这就是允许浏览器以不同方式处理:visited的原因。据我所知，浏览器只是模仿被访问链接的样式，同时仍然应用样式 - 从技术上讲，它们将被允许根本不应用:visited样式。大多数供应商刚刚决定，假设没有将样式应用于兄弟组合器^{（因为这只是我个人的猜测，如果有人有这方面的具体来源，请确认。）< / SUP>}

请参阅spec

中的注释

注意：样式表作者可以滥用：link和：visited伪类来确定用户未经用户同意访问过哪些网站。
因此，UA可能会将所有链接视为未访问的链接，或实施其他措施以保护用户的隐私，同时以不同方式呈现访问和未访问的链接。

＆＃13;

console.log(`Browser is lying about  the color of the i element - should be olive, but is ${window.getComputedStyle(document.querySelector("a i")).color} (red) instead.`);

＆＃13;

a{
  color:red;
  display:block;
  text-decoration:none;
  font-size:20px;
}
a:visited{
  color:#bada55;
}
a:visited ~ div{
  color:LightGoldenRodYellow !important;
}
a span{
  color:RebeccaPurple;
}
a:visited i{
  color:Olive;
}
a:last-of-type{
  color:hotpink;
}
a:last-of-type + div{
  color:MediumSeaGreen;
}

＆＃13;

<a href="#">Is red while not visited! <span>Is always RebeccaPurple!</span> <i>Should be olive once link is visited!</i></a>
<a href="#">Will be #bada55 when visited!</a>
<a href="#">Will be hotpink!</a>
<div>Should be LightGoldenRodYellow, but is MediumSeaGreen!</div>

＆＃13;

链接：访问过没有与兄弟组合

1 个答案: