Question

我有这个HTML：

<div class="image">
   <img src=... />
   <img src= .../>
</div>

我只会将css应用于类图像div的第一个图像而不必向我的第一个img添加一个类（在这种情况下，我会做.image .img1但是还有另一种方法吗？

非常感谢你的帮助

Answer 1

您可以使用:first-child选择器执行此操作。

你也可以使用:nth-child(1)（其中1是=第一个孩子，2等于第二个孩子等）。

最后，更合适的方法是使用:first-of-type

例如：

div.image img:first-child {}

或者：

div.image img:nth-child(1) {}

或者（如果还有其他元素，请说出任何图像之前的<h1>：

div img:first-of-type

如果你有可能有一个带有类图像的div，里面有图像，还有另一个有图像的div，就像这样：

HTML：

<div class="image">
   <img src=... />
   <img src= .../>
   <div class="image">
      <img src=... />
      <img src= .../>
   </div>
</div>

然后使用这些选择器：

例如：

div.image > img:first-child {}

或者：

div.image > img:nth-child(1) {}

或者：

div > img:first-of-type

:first-child和:nth-child()以及:first-of-type和child combinator上的文档。

请注意，:nth-child()和:first-of-type是CSS3选择器，在使用IE时会提供一些有限的支持。有关浏览器支持的详细信息，请参阅Can I use CSS3 Selectors。

考虑像Selectivizr这样的东西来帮助标准化IE。

Answer 2

您可以使用first-child选择器

执行此操作

.image img:first-child
{
  height:500px;
  width:200px;
  border:15px solid Red;    
}

JS Fiddle Example

Answer 3

'：first-child'选择器似乎可能就是你所需要的。

http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 4

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>

Answer 5

如果你想要DIV中的第一个图像（并且可能还有其他元素），你需要first-of-type而不是first-child

div > img:first-of-type {}

考虑以下 html

<div>
    <p>paragraph, this is :first-child</p>
    <img src="..."><!-- this is img:first-of-type -->
</div>

可在https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

找到更多详情

如何在一个包含许多img标签的div中选择第一个img标签？

5 个答案: