我的第二个<article>的css在我添加新标签后停止工作？

Question

这有点奇怪，在我的第二篇文章中，我有2个图像，第一个是圆形，另一个是边框半径，除了右边。我的问题是，每当我在第二篇文章之后添加一个新标签时，第二篇文章的CSS将被删除，不确定原因。

HTML

.section3 {
  background: #f6e7c0;
  max-width: 1024px;
  width: 100%;
  height: 1024px;
  margin: 0 auto;
}
.section3 article {
  border: 1px solid black;
}
.section3 article img {
  height: 200px;
  width: 200px;
}
.section3 article:first-child {
  float: right;
  padding-top: 65px;
}
.section3 article:first-child img:first-child {
  height: 400px;
  width: 400px;
  border-radius: 5%;
  padding-right: 10px;
}
.section3 article:first-child img:last-child {
  height: 400px;
  width: 400px;
  border-top-left-radius: 5%;
  border-bottom-left-radius: 5%;
}

<div class="section3">
  <article>
    <img src="images/IMG_9243.JPG" alt="">
    <img src="images/IMG_0244.JPG" alt="">
  </article>
  <article>
    <img src="images/IMG_9935.JPG" alt="">
    <img src="images/IMG_9479.JPG" alt="">
  </article>
  <h1>asd</h1>
</div>

https://jsfiddle.net/mmc5qczc/

Answer 1

在你的JSFiddle中你有几个.section3 article:last-child CSS，我在上面发布的内容中没有看到。在第二篇文章后添加标记时，第二篇文章不再是最后一篇文章。它可能是.section3的最后一篇文章，但它不是最后一个孩子。