Question

我尝试使用CSS访问嵌套的html元素来更改一些属性，但它似乎无法正常工作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS代码的第一部分完美无缺，但第二部分并不完美。它并没有与＆＃34;＆gt;＆＃34;标志也是。我试图谷歌其他不同的解决方案，但没有一个真正有效。

基本上我试图让被访问链接中的图像显示为灰色，表示用户已经点击过它们。

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可能会将所有链接视为未访问的链接或实施其他措施来保留用户的隐私，同时以不同方式呈现已访问和未访问的链接。

使用CSS访问嵌套元素

1 个答案: