0

在我的博客中，我有一系列 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}，但由于某种原因，这不是选择最后一篇文章。知道我做错了什么吗？如果我要使用无序列表，它会很好用，但对于文章来说就不行了。

4

3 回答 3

2

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

如果您在文章标签之后有任何内容（即您输入“....这篇文章重复 7 次”），上述内容将不起作用如果在文章标签之后有任何内容（例如页脚），那么最后一篇文章是不是其父母的最后一个孩子。

这个选择器对我有用（Windows 8、Chrome）：

article:last-of-type{}

请参阅此 JSFiddle并尝试删除页眉和页脚 HTML 标记以查看 :last-child 和 :last-of-type 之间的区别

于 2013-05-20T13:12:04.113 回答
1

你可以试试这个？

article.post div:last-child{}​

看到这个小提琴。

e：如果我只是在使用，我也无法让它工作article.post:last-child

于 2012-05-11T16:34:00.163 回答
1

我认为这只是个人喜好，但尝试在选择器中定义你的父母：

#blog article.post:last-child

见：http: //jsfiddle.net/wjCTx/

此外，而不是：

<div id="blog">

我认为使用 Section 标签可能更符合语义。

于 2012-05-11T16:45:36.357 回答