第一个孩子没有被触发

Question

我有一些在 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。问题是我不希望 first 帖子有上边框，而 last 帖子有下边框。

我的 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;
    }
  }

这里的问题是 last 帖子的底部边框被删除，但 first 没有被触及。第一个孩子没有被触发！

这是为什么呢？第一个孩子和最后一个孩子的工作方式不一样吗？

Answer 1

您可能在第一个 <article> 之前还有其他元素。
如果:first-child 有一个不匹配的较早同级，则该元素将不适用。