html - 有人可以帮我用 nth-child 伪类定位我的容器 div 吗？

Question

我正在为投资组合页面编写一个非常简单的基于 flex 的 2 列网格，其中每个 .container 类都需要具有与其链接到的元素相关的单独图像。我不想给每个 ID 并单独定位它们，而是想使用 .container:nth-child 按它们出现的顺序选择它们。问题是第 nth-child(1) 有效，但每个第 nth-child(2,3,4..etc) 只使用与 nth-child(1) 相同的图像，尽管我在每个中链接了不同的图像。

我尝试了几乎所有更具体的变体，例如:“main a div.container:nth-child(2) {}”、“main a div:nth-child(2) {}”、“main .container:nth-child(2)"等无济于事。

HTML:

    <main>
            <a href="happy.html"><div class="container">
                <div class="overlay">
                    <h3>An Inquiry On &quot;Happy&quot;</h3>
                    <p>Senior Project</p>
                    <p>Spring 2019</p>
                </div>
            </div></a>

            <a href="biopsy.html"><div class="container">
                <div class="overlay">
                    <h3>A Biopsy in Verse</h3>
                    <p>Publication</p>
                    <p>Fall 2018</p>
                </div>
            </div></a>
    </main>

CSS:

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    align-items: center;
    margin: 25vh 10% 0 10%;
}

.container {
    width: 38vw;
    height: 500px;
    display: flex;
    margin-bottom: 4vw;
}

main a div.container:nth-child(1) {
    background-image: url(../images/portfolio/1.png);
}

main a div.container:nth-child(2) {
    background-image: url(../images/portfolio/2.png);
}

我只需要每个带有 .container 类的 div 都有一个独特的背景图像。还有很多其他 CSS 处理功能性的覆盖悬停效果，其中包含 .overlay div。我认为这不会影响任何事情，但谁知道呢。

Answer 1

那是因为你的HTML结构有点不对。

如果你仔细看，你是div.container元素是自己的 child <a>...</a>元素。这意味着他们总是第一个 child [nth-child(1)]。

您需要重组您的 HTML 代码，以便 div.container元素是彼此的 sibling ，以便应用您的 CSS 规则。

例子:

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

或者，或者更改您的 CSS 选择器以获得 a:nth-child(1) div.container等

例子:

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