css - 伪选择第 n 个 child 问题

Question

我试图只选择第一张图片将其向上移动:

#rockfon_mono:nth-child(1) img {
	margin-top:-40px;
  border: solid green;
	
}

<div id="rockfon_mono">
<img src="images/products/rockfon-mono/rockfon-header.png" alt="" />
 <h2>Mono® Acoustic TE</h2>

<p>Seamless acoustic ceiling and wall lining |  Acoustic and aesthetic comfort | No more compromises</p>
<p>The current trend in architectural design favours the use of highly reflective, sturdy materials such</p>
<div id="rockfonImageOne"> 
    <img src="images/products/rockfon-mono/Mono.png" alt="" />
</div>
 <h2>Acoustics</h2>

<p>Full acoustic control for any space | Acoustic enhancement for new and refurbished spaces | High sound absorption | Improved speech intelligibility</p>
<p>Acoustic and aesthetic comfort Mono Acoustic TE’s aesthetic quality matches its acoustic quality. Mono Acoustic TE provides high sound absorption, echo reduction, a significant decrease in reverberation</p>
<div id="rockfonImageOne"> 
    <img src="images/products/rockfon-mono/Acoustics.png" alt="" />
</div>
 <h2>Characteristics</h2>

<p>System description and performance the unique Mono Acoustic TE system is a highly acoustic monolithic ceiling and wall lining. This patented innovation is made of high quality stone wool for optimum</p>

然而，它正在选择整个页面中的每个图像

Answer 1

在您的特定 HTML 标记中，您可以使用直接子项，因为其他 imgs 不是直接子项

#rockfon_mono > img {
    margin-top:-40px;
    border: solid green;
}

DEMO