时间戳

首页 > 解决方案 > 如何在文章的引导列中使用 nth-child()

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

问题描述

我正在尝试使用 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;
}

但它不起作用。

标签： htmlcss

解决方案

你可以试试这个：

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

它将以第二个 div 为目标，.ld_course_grid并在该 div 内，即文章。

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

推荐阅读