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

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的最后一篇文章，但不是最后一个孩子。

Answer 2

这是因为：last-child伪类。 所以您的选择者说：“给我一篇文章，它是具有section3类的元素中的最后一个孩子。”

您可以使用:nth-child(2)或更具体的选择器。

https://jsfiddle.net/xeoe330e/

http://www.w3schools.com/cssref/css_selectors.asp