html - 我如何使用用 anchor 标记包裹的特定类来定位每三个 div？

Question

我如何定位每个第 3 个 div 并赋予它特定的样式？在我插入 <a> 之前标记，我的代码工作正常，但我不知道为什么它现在不工作:

<div class="post-row clearfix">
    <a href="">
        <div class="recent-post post-1">
            <div class="recent-post-info">
                <p>Three Apple Pi Students Win Physics Video Award</p>
            </div><!-- recent-post-info -->
        </div><!-- recent-post -->
    </a>

    <a href="">
        <div class="recent-post post-2">
            <div class="recent-post-info">
                <p>Robot on Mars &mdash; 3 years later</p>
            </div><!-- recent-post-info -->
        </div><!-- recent-post -->
    </a>

    <a href="">
        <div class="recent-post post-3">
            <div class="recent-post-info">
                <p>Second Annual "Spooktacular" cruise in</p>
            </div><!-- recent-post-info -->
        </div><!-- recent-post -->
    </a>

</div><!-- post-row -->

这是 CSS:

.post-row{
    padding: 0 15%;
}

.recent-post{
    width: 31.33333333%;
    height: 200px;
    float: left;
    margin: 0 3% 40px 0;
    border-radius: 10px;
    display: table;
}

.recent-post-info{
    border-radius: 10px;
    display: table-cell;
    vertical-align: middle;
    background: rgba(109, 109, 109, .85);
}     

.recent-post:nth-child(3n){
    margin-right: 0;
}

Answer 1

您的代码不起作用，因为每个 div.recent-post 都是单个 anchor 的子级，因此第三个不存在。

针对第三个 anchor ，那么就是div

.post-row a:nth-child(3) .recent-post