Question

在我的博客中，我有一系列HTML5文章：

<div id="blog">
<article class="post">  
    <div class="blogLeft">
        <img src="images/5.jpg" />          
    </div>

    <div class="blogRight">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet, ligula in commodo vestibulum, erat purus consectetur ipsum, ac sodales quam risus id nibh. Suspendisse iaculis egestas nisi et pharetra. Proin gravida, eros et aliquam tempus, massa diam feugiat urna, vestibulum suscipit purus diam vitae turpis. Cras congue aliquet sollicitudin. Fusce sit amet dui odio. In vitae dictum ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="readMore" href="#">Read More</a>
    </div>
</article>

....this article repeats 7 times
</div>

我想使用css选择器，last-child选择上一篇文章并删除底部边框。通常我会使用article.post:last-child{margin-bottom:0; padding:0; border-bottom:0}但由于某种原因，这不是选择最后一篇文章。知道我做错了什么吗？如果我使用无序列表，它会很有用，但与文章无关。

Answer 1

我知道这是一个老问题，但我遇到了同样的问题并遇到了这个问题。

如果您在文章标签之后有任何内容（即您输入“....此文章重复7次”），上述内容将无效。如果文章标签后面有任何内容（a例如，页脚，然后最后一篇文章是不其父母的最后一个孩子。

此选择器适用于我（Windows 8，Chrome）：

article:last-of-type{}

请参阅this JSFiddle并尝试删除页眉和页脚HTML标记，以查看：last-child和：last-of-type

之间的区别

Answer 2

你可以尝试一下吗？

article.post div:last-child{}

请参阅this小提琴。

e：如果我刚刚使用article.post:last-child

，我也无法让它工作

Answer 3

我认为这只是个人偏好，但尝试在选择器中定义您的父级：

#blog article.post:last-child

请参阅：http://jsfiddle.net/wjCTx/

此外，而不是：

<div id="blog">

我认为使用Section标签可能更具语义性。

关于HTML5文章的CSS last-child

3 个答案: