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。问题是我不希望第一个帖子有一个顶部边框而最后一个有一个底部边框。

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

这里的问题是在最后帖子上移除了底部边框，但第一个未受影响。第一个孩子没有被触发！

为什么？第一个孩子和最后一个孩子的工作不一样吗？

Answer 1

在第一个<article>之前，您可能还有其他元素如果:first-child具有不匹配的早期兄弟，则{{1}}将不适用。

第一个孩子没有被触发

1 个答案: