使用 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伪类restricts changes to a white-list of properties：

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

由于opacity 不在此列表中，因此您不会看到您的图像发生变化。

---

A note on why this list is restrictive:

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