：nth-​​last-child（-n + 3）不能使用article元素？

Question

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

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

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

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

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.clear中删除最后两个元素footer.grid_12和div.container12

由于：

  

：nth-​​last-child CSS伪类匹配文档树中具有+ b-1兄弟的元素。

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

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

修改

如果您希望将这些元素保留在HTML文档中，只需将.post-entry元素包含在div，section等任何块元素中，不包括{{1}的最后两个非兄弟节点}}。因此，请确保block元素仅包含.post-entry

的兄弟

JSFiddle