Html 有人能帮我用第n个子伪类定位容器div吗？

我正在为一个公文包页面编写一个非常简单的基于flex的2列网格，其中每个.container类都需要有与它们链接到的项目相关的单独图像。我想使用.container:nth子对象，而不是给每个子对象一个ID并分别针对它们，而是按照它们出现的顺序选择它们。问题是第n个孩子（1）可以工作，但是每个第n个孩子（2,3,4..等）只使用与第n个孩子（1）相同的图像，尽管我在每个孩子（1）中链接了不同的图像

我尝试了几乎所有更具体的变体，比如：“main a div.container:nth child（2）{}”、“main a div:nth child（2）{}”、“main.container:nth child（2）”等等，但都没有用

HTML:

---

我只需要.container类的每个div都有一个唯一的背景图像。还有很多其他CSS也在处理覆盖悬停效果，即.overlay div。我认为这不会影响任何事情，但谁知道呢。

这是因为您的HTML结构有点错误

如果仔细观察，您就是div.container元素是它们自己的

…

元素的子元素。这意味着他们总是第一个孩子[n个孩子（1）]

您需要重新构造HTML代码，以便

div.container

元素彼此是兄弟元素，以便应用CSS规则

例如：

<main>
   <div class="container">
     <a href>...</a>
   </div>
   <div class="container">
     <a href>...</a>
   </div>
</main>

main a:nth-child(2) div.container {
  ...
}

---

这是因为你的HTML结构有点错误

如果仔细观察，您就是div.container元素是它们自己的

…

元素的子元素。这意味着他们总是第一个孩子[n个孩子（1）]

您需要重新构造HTML代码，以便

div.container

元素彼此是兄弟元素，以便应用CSS规则

例如：

<main>
   <div class="container">
     <a href>...</a>
   </div>
   <div class="container">
     <a href>...</a>
   </div>
</main>

main a:nth-child(2) div.container {
  ...
}

---

谢谢，这更有意义！谢谢，这更有意义！