html - 图片 :first-child not working for my first image

Question

我已经尝试过 #logos img:first-child{} 尝试将我的顶级 img 格式化为与其他的略有不同，但它不起作用。谁能帮我弄清楚为什么？

<div id="logos" name="logos">
    <div class="container">
        <div class="row">
            <br>
            <h1 class="centered">SHOWS</h1>
            <img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
            <hr>
        </div><!-- end row -->
        <div class="row">
            <div class="col-lg-6">
                <img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
            </div>
            <div class="col-lg-6">
                <img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
            </div>
        </div><!-- end row -->
    </div>
</div>

Answer 1

first-child 伪选择器选择作为其父元素的第一个 子元素的任何元素。在您的示例中，在第一个 .row div 中，h1“SHOWS”是第一个元素，您的 img 是第二个元素。所以它不会被选中。相反，在另一个 div 中，两个 img 标签都是其父标签的第一个子标签，因此它们确实被选中。

换句话说，img:first-child 不会选择第一个 img 标签，它会选择 img 标签，它是其 parent 的第一个 child 。如果它有前一个 sibling ，则 first-child 不适用。

我们可以通过将 first-child 放在 .row 上来修复您的代码，以便选择第一行 div 中的 img，这也恰好是第一张图片。

#logos .row:first-child img {
  border: 1px solid blue;
  }

<div id="logos" name="logos">
			<div class="container">
				<div class="row">
				<br>
					<h1 class="centered">SHOWS</h1>

					<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">

					<hr>
				</div> <!-- end row -->

				<div class="row">
					<div class="col-lg-6">
						<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px"       height="300px">
					</div>
					<div class="col-lg-6">
						<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
					</div>
				</div> <!-- end row -->

			</div>
		</div>