使用 CSS 访问嵌套元素

Question

我正在尝试使用 CSS 访问嵌套的 html 元素以更改一些属性，但它似乎不起作用。

div.someid1 a:visited {
  color: #666666;
}
div.someid2 a:visited img {
  opacity: 0.25;
}

<div class="someid1">
  <a href="https://example.com">link</a>
</div>
<div class="someid2">
  <a href="https://example.com">
    <img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg">
  </a>
</div>

CSS 代码的第一部分运行良好，但第二部分则不然。它不适用于">"符号。我试图谷歌其他不同的解决方案，但没有一个真正有效。

从本质上讲，我试图使访问过的链接中的图像显示为灰色，以表明用户已经单击了它们。

Answer 1

:visited伪类将更改限制为属性的白名单：

• color
• background-color
• border-color
• border-bottom-color
• border-left-color
• border-right-color
• border-top-color
• column-rule-color
• outline-color

由于opacity不在此列表中，因此您不会看到图像更改。

---

有关此列表为何具有限制性的说明：

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