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 / :last-child需要一个部分中的任何列表，但在您的代码img中包含div，请尝试在父div上添加:first-child，请参阅下面的示例代码

 #logos .row:first-child img{}

Answer 2

first-child伪选择器选择其父元素的第一个子元素。在您的示例中，在第一个.row div中，h1“SHOWS”是第一个元素，而img是第二个元素。所以它没有被选中。相反，在另一个div中，两个img标记都是其父级的第一个子级，因此它们做被选中。

换句话说，img:first-child未选择第一个img标记，而是选择img标记，该标记是其父级的第一个子标记。如果它有前一个兄弟，则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>

Answer 3

试试这个： -

#logos .row:first-child img{

}

Answer 4

另一种选择可能是第一种选择尝试#logos img：first-of-type {}

img：第一个孩子没有为我的第一张图片工作

4 个答案: