2

HTMLで次のような投稿があります。

<article class="post">
  <h3>Lorem ipsum adipisicing do sed laboris</h3>
  <p>
    Lorem ipsum cillum reprehenderit consequat veniam dolore non minim in dolore commodo labore ex veniam sed aliqua amet incididunt ea ut occaecat cupidatat ex Duis Excepteur exercitation enim tempor deserunt eiusmod deserunt Ut culpa magna culpa.
  </p>
  <p>
    Lorem ipsum quis laboris ex cillum ex do ullamco amet sint commodo reprehenderit id tempor reprehenderit do dolore esse ut qui esse laboris reprehenderit voluptate elit consequat incididunt ut anim nulla cupidatat aliquip est ut elit eiusmod Duis nulla ad ut. 
  </p>
  <p class="read-more">
    <a href="#">Read more »</a>
  </p>
</article>

次に、上下の境界線を設定するCSSがあります。問題は、最初の投稿に上枠を付け、最後の投稿に下枠を付けたくないということです。

私のCSS（実際にはSASS）：

  .post {
    border-bottom: 1px solid darken($lightestBlue, 5%);
    border-top: 1px solid darken(#FFFFFF, 5%);

    &:first-child {
      border-top: none;
    }
    &:last-child {
      border-bottom: none;
    }
  }

ここでの問題は、最後の投稿で下の境界線が削除されているが、最初の投稿は変更されていないことです。最初の子はトリガーされません！

何故ですか？ファーストチャイルドとラストチャイルドは同じように機能しませんか？

4

1 に答える 1

4

おそらく最初の前に他の要素があり<article>ます。
:first-child一致しない以前の兄弟がいる場合は適用されません。

于 2012-08-23T20:28:17.500 に答える