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都是单个锚的子代，因此第三个不存在。

定位第三个锚，然后是div

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

Answer 2

为什么不在每个锚标记上添加一个类并定位锚标记而不是嵌套的div标记？

如何使用锚标记包装的某个类来定位每个第三个div？

2 个答案: