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 回答