使用CSS将Img Src更改为父A href

Question

是否可以将img元素更改为其父a标记的href属性？例如，如果我有：

<a class="img-parent" href="http://placehold.it/400x200">
    <img class="img-class" src="http://placehold.it/90x90" alt="This will change" />
</a>

我可以使用仅 CSS更改img的内容吗？

我知道我可以使用以下代码更改img，但是我可以将其指向父级的href属性吗？

.img-class{
   content:url("http://placehold.it/400x200");
}

Answer 1

从理论上讲，我认为你可以使用CSS variables：

.img-parent {
  --img: attr(href);
}
.img-class {
  content: url(var(--img));
}

但是不要期望它能够发挥作用：

• content适用于所有元素（而不仅仅是::before和::after）并未得到广泛实施。
• attr()在content以外的属性中未得到广泛实施。
• CSS变量未得到广泛实施。
• url()中的CSS变量实现得更少。