css - 为标题和图像使用网格，但现在一个图像位于/隐藏另一个图像之上

Question

第二个 img 现在不是并排出现，而是将另一个隐藏在它后面，不确定是什么原因造成的。有一段时间没有使用网格区域，但使用了一些我用于其他东西的相同结构，已经成功了，所以不明白为什么这不起作用。感谢您的帮助。

#intro article{
	background: #FFE121;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"a a"
		"b c";
	grid-column-gap: 50px;
	
}

#intro article h2{
	grid-area: a;
}

#intro article:first-of-type img{
	grid-area: b;
}

#intro article:last-of-type img{
	grid-area: c;
}

#intro h2{
	text-align: center;
	color:#037272;
}


#intro p{
	flex:100%;
	font-size: 25px;
	padding:20px 40px;
}

	<section id="intro">
		<article>
		
			<img src="images/c1.JPG" alt="c 1">

			<h2>This year we welcome ...</h2>

			<img src="images/c2.JPG" alt="c 2">
			
		</article>
			
		
		<p>By popular demand...</p>
		
	</section>

Answer 1

您的 CSS 选择器 #intro article:first-of-type img 不正确，应该是 #intro article img:first-of-type。

#intro article:last-of-type img 也是如此。

#intro article{
	background: #FFE121;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"a a"
		"b c";
	grid-column-gap: 50px;
	
}

#intro article h2{
	grid-area: a;
}

#intro article img:first-of-type{
	grid-area: b;
}

#intro article img:last-of-type{
	grid-area: c;
}

#intro h2{
	text-align: center;
	color:#037272;
}


#intro p{
	flex:100%;
	font-size: 25px;
	padding:20px 40px;
}

<section id="intro">
		<article>
		
			<img src="" alt="c 1">

			<h2>This year we welcome ...</h2>

			<img src="" alt="c 2">
			
		</article>
			
		
		<p>By popular demand...</p>
		
	</section>