使用CSS访问嵌套元素 [英] Access nested elements with CSS

问题描述

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

  div.someid1 a：visited {color：＃666666;} div.someid2 a：visited img {opacity：0.25;}  

< div class =someid1> < a href =https://example.com>连结< / 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代码完美工作，但第二部分没有。它也不适用于>符号。我试图谷歌其他不同的解决方案，但没有一个真正有效。

基本上我试图让访问过的链接中的图像显示灰色以显示用户有已点击它们。

解决方案

：已访问伪类限制对属性白名单的更改：

• 颜色


• 背景颜色


• border-color


• border-bottom-color


• border-left-color


• border-right-color


• border-top-color


• column-rule-color


• outline -color

由于不透明度未开启此列表中您不会看到图像更改。

---

关于为什么此列表限制性的说明：

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

I'm trying to access nested html elements with CSS to change a few properties, but it doesn't seem to work.

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>

The first part of CSS code works perfectly, but that second part doesn't. And it doesn't work with ">" sign as well. I tried to google other different solutions, but none actually works.

Essentially I'm trying to make images inside of visited links to appear gray-ish to indicate that user has already clicked them.

解决方案

The :visited pseudo-class 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

Since opacity is not on this list you will not see your image change.

---

A note on why this list is restrictive:

Since it is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user’s consent, UAs may treat all links as unvisited links or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.

这篇关于使用CSS访问嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！