如何将具有特定id的图像引用到具有特定id的部分 - CSS

Question

我有一个网站，我想使用@media来提高响应速度。 我正在考虑使用content:url("image.jpg")来获取具有我想要的维度的图像，但我不知道如何将带有另一个id的部分内的id的图像放入CSS中。

我的HTML就像：

<section id="1">
    <img class="photo" id="1"/>
    <img class="photo" id="2"/>
    <img class="photo" id="3"/>
</section>

Answer 1

您无法重复ID。 ID是唯一的。

您可以通过几种不同的方式定位这些图片，但使用nth-child是我的方式，而不是使用多个不同的ID来混乱您的CSS。

例如：

section#1 > img:first-child { /* first image*/ }
section#1 > img:nth-child(2) { /* second child */ }
section#1 > img:last-child {/* last image */}

这应该可以让您了解如何定位这些图像。

Answer 2

为什么不按字母顺序给出图像类。因此，您拥有id为1的容器，其中包含类a，b，c等的图像。您的下一个容器ID为id 2，类别为a，b，c，d等。然后您可以轻松访问任何图像：

error()

等

编辑：

您可以在class属性中添加多个类，即

#1 .a {
    //css code
}
#2 .d{
    //css code
}

并像这样应用CSS：

<section id="1">
    <img class="photo 1" id="1"/>
    <img class="photo 2" id="2"/>
    <img class="photo 3" id="3"/>
</section> 

Lloan Alas是对的，你只能为id分配唯一值，所以你必须抛弃你图像上的id属性！