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

时间:2015-05-01 16:02:09

标签: html css

这有点奇怪,在我的第二篇文章中,我有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/

1 个答案:

答案 0 :(得分:3)

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