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 selector, 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

これは単なる個人的な好みだと思いますが、セレクター内で親を定義してみてください。

#blog article.post:last-child

参照: http://jsfiddle.net/wjCTx/

また、代わりに：

<div id="blog">

セクションタグを使用する方がより意味があると思います。

于 2012-05-11T16:45:36.357 に答える
1

あなたはこれを試すことができますか？

article.post div:last-child{}​

このフィドルを参照してください。

e: 私がただ使っていたなら、私もそれを動作させることができませんでしたarticle.post:last-child

于 2012-05-11T16:34:00.163 に答える