html - 如何在文章的引导列中使用 nth-child()

Question

我正在尝试使用 nth-child() 来定位 <article>在引导网格中，但显然我使用的类选择器不正确。

这是在浏览器中生成的 html。其中有 6 个，但我发布了 1 个的代码以减少行数。

<div class="ld_course_grid col-sm-8 col-md-4 ">
    <article id="post-60" class="thumbnail course post-60 sfwd-courses type-sfwd-courses status-publish has-post-thumbnail hentry ast-article-single">
        <div class="caption">
            <h3 class="entry-title">Title</h3>
            <p class="entry-content">Some lorem text</p>
            <p class="ld_course_grid_button"><a class="btn btn-primary" role="button" href="#" rel="bookmark">Learn more</a></p>
        </div>
    </article>
</div>
<div class="ld_course_grid col-sm-8 col-md-4 ">
    <article id="post-256" class="thumbnail course post-256 sfwd-courses type-sfwd-courses status-publish hentry ast-article-single">
        <div class="caption">
            <h3 class="entry-title">Second Title</h3>
            <p class="entry-content">More lorem text</p>
            <p class="ld_course_grid_button"><a class="btn btn-primary" role="button" href="#" rel="bookmark">Learn more</a></p>
        </div>
    </article>
</div>

我试过这样的事情:

.ld_course_grid article:nth-child(2) {
   background-color: red;
}

但它不起作用。

Answer 1

你可以试试这个:

.ld_course_grid:nth-child(2) article {
   background-color: red;
}

它将以 .ld_course_grid 类的第二个 div 为目标，在这个 div 中，文章。

那是因为您的 HTML 结构在 .ld_course_grid 元素中只包含一篇文章，所以 :nth-child(2) 必须应用于此元素而不是 文章