：nth-last-child(-n+3) 不适用于文章元素？

Question

我想知道为什么:nth-last-child(-n+3) {}不适用于我的文档标记中的文章元素？根据注释，它应该可以工作，如以下示例所示：http://jsfiddle.net/8PXXm/

当我在布局中传递标记时，它对我不起作用。我想连续选择最后 3 个项目。

.post-entry:nth-last-child(n+3) { display: none; } 

上面的代码选择所有行项目，而不是最后 3 个。

.HTML：

<article class="grid_4 post-entry">
    <a href="#" title="">
        <figure class="post-thumb">
                <img src="../images/placehold.png" alt="Placehold">
                <figcaption>
                    <img src="../images/cross.png" alt="Cross x">
                </figcaption><!-- End figcaption.post-thumb -->
        </figure><!-- End figure.post-thumb -->
    </a>
</article><!-- End article.grid_4 post-entry -->

JSFiddle： http://jsfiddle.net/4XP5W/11/

Answer 1

你的代码很好，你只是缺少选择器中的-。

但它仍然不起作用？

您需要从父div.container12中删除最后两个元素div.clear和footer.grid_12

因为：

：nth-last-child CSS 伪类匹配文档树中具有 an+b-1 同级的元素。

所以你的选择器.post-entry:nth-last-child(n+3) { background: red; }正在选择

div.clear和footer.grid_12兄弟姐妹。

编辑：

如果要将这些元素保留在HTML文档中，只需将.post-entry元素包装在任何块元素中，例如div，section排除.post-entry的最后两个非兄弟元素。因此，请确保块元素仅包含.post-entry的同级

JSFiddle