Html 如何将具有特定id的图像引用到具有特定id的节中-CSS

我有一个网站，我想使用

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

---

您不能重复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 */}

---

这会让你知道如何瞄准这些图像

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

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

等等

编辑：

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

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

---

Lloan是对的，您只能为id分配唯一的值，因此您必须在图像上放弃id属性

一,。在一个页面中，没有两个ID必须相同。因此，假设您的分区id被称为

a

。2.要选择第一个img，请使用css选择器

#a#1

。对于第二个

#a#2

。等等。3.要选择所有图像，请执行

#a.photo

类photo的可能重复项是我在css中用于制作滑块的名称

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