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

-1

，因为它说，我想知道为什么: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/

希望你能帮助我。谢谢！

来源

2014-04-28 Caspert

什么是您的HTML看起来像兄弟姐妹？ –

'是否：nth-last-child（-n + 3）与article元素一起工作？' - 是的（参见[** jsfiddle **]（http://jsfiddle.net/8PXXm/））。正如你可以在[** w3org Spec on nnth-last-child **]（http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo）中看到的那样，它没有提到“article”元素被排除在功能之外。您的问题很可能是CSS命令本身与您拥有的标记结合使用。如果您发布相关标记，我们可以看看。 – Nope

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

但它仍然无法正常工作？

你需要最后两个元素div.clear和footer.grid_12从你的父母删除div.container12

因为：

的：第n-最后孩子CSS伪类，它有一个+ 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

来源

2014-04-29 12:11:39

奥克。我看到了。当我删除上面的代码时，它将正确应用于文章元素的最后3个元素。但是这两个div对我的标记都很重要。有没有可能解决这个问题？ @RahilWazir – Caspert

@Caspert查看更新后的答案和小提琴。 –

谢谢。它正在工作！ – Caspert

：nth-​​last-child（-n + 3）不适用于文章元素？

回答

相关问题

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