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

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和on :nth-​​child()和on :first-of-type和on child combinator.

请注意,:nth-child()并且:first-of-type是CSS3选择器,它们在使用IE时具有一些有限的支持.请参阅我可以使用CSS3选择器获取浏览器支持详细信息.

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

Answer 2

你可以使用first-child选择器

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

JS小提琴示例