CSS 如何在具有许多 img 标签的 div 中选择第一个 img 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15573159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select first img tag in a div with many img tag?
提问by Reveclair
I have this html :
我有这个 html：
<div class="image">
<img src=... />
<img src= .../>
</div>
And I would to apply css only to the first image of div of class image without having to add a class to my first img (in that case, I would do .image .img1but is there another way ?
而且我只想将 css 应用于类图像的 div 的第一个图像，而不必向我的第一个 img 添加一个类（在这种情况下，我会这样做，.image .img1但还有另一种方法吗？
Thanks a lot for your help
非常感谢你的帮助
回答by Michael
You can use the :first-childselector to do this.
您可以使用:first-child选择器来执行此操作。
You could also use :nth-child(1)(where the 1 is = to the first child, 2 is equal to the second child etc.)
您也可以使用:nth-child(1)（其中 1 是 = 第一个孩子，2 等于第二个孩子等）
Finally, a more proper way would be the use of :first-of-type
最后，更合适的方法是使用 :first-of-type
For example:
例如：
div.image img:first-child {}
Or:
或者：
div.image img:nth-child(1) {}
Or (if there are other elements, say an <h1>that comes prior to any images:
或者（如果还有其他元素，请说<h1>在任何图像之前的an ：
div img:first-of-type
If you have the potential for having a div with class image which has images inside it and also another div which has images in it, like this:
如果您有可能拥有一个带有类图像的 div，其中包含图像，并且还有另一个包含图像的 div，如下所示：
HTML:
HTML：
<div class="image">
<img src=... />
<img src= .../>
<div class="image">
<img src=... />
<img src= .../>
</div>
</div>
Then use these selectors:
然后使用这些选择器：
For example:
例如：
div.image > img:first-child {}
Or:
或者：
div.image > img:nth-child(1) {}
Or:
或者：
div > img:first-of-type
Documentation on :first-childand on :nth-child()and on :first-of-typeand on child combinator.
有关:first-child和:nth-child()以及:first-of-type和child combinator 的文档。
Note that :nth-child()and :first-of-typeare CSS3 selectors, which carry some limited support when using IE. See Can I use CSS3 Selectorsfor browser support details.
请注意，:nth-child()和:first-of-type是 CSS3 选择器，在使用 IE 时提供一些有限的支持。有关浏览器支持的详细信息，请参阅Can I use CSS3 Selectors。
Consider something like Selectivizrto help standardize IE.
考虑使用Selectivizr 之类的东西来帮助标准化 IE。
回答by Sachin
You can do it using first-childselector
您可以使用first-child选择器来完成
.image img:first-child
{
height:500px;
width:200px;
border:15px solid Red;
}
回答by Scott Stroz
The ':first-child' selector seems like it might be what you need.
':first-child' 选择器似乎正是您所需要的。
回答by xec
If you want the first image inside a DIV (and there might be other elements preceding it) you need first-of-typerather than first-child
如果您想要 DIV 中的第一个图像（并且可能有其他元素在它之前），您需要first-of-type而不是first-child
div > img:first-of-type {}
consider the following html
考虑以下html
<div>
<p>paragraph, this is :first-child</p>
<img src="..."><!-- this is img:first-of-type -->
</div>
More details can be found at https://developer.mozilla.org/en-US/docs/CSS/:first-of-type
更多细节可以在https://developer.mozilla.org/en-US/docs/CSS/:first-of-type找到
回答by Ramakrishnan R
article>img:first-child {
border:1px solid #f00;
}<article class="image">
<img src=... />
<img src= .../>
<div class="image">
<img src=... />
<img src= .../>
<img src= .../>
</div>
<img src= .../>
<img src= .../>
</div>