Css 如何在具有多个img标记的div中选择第一个img标记？

我有这个html：

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

我只想将css应用于类image的div的第一个映像，而不必将类添加到我的第一个img（在这种情况下，我会执行

.image.img1

，但还有其他方法吗

---

非常感谢您的帮助：“：first child”选择器似乎正是您所需要的

---

您可以使用

第一个子项

选择器执行此操作

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

---

您可以使用

:first child

选择器执行此操作

您还可以使用

：第n个子项（1）

（其中1等于第一个子项，2等于第二个子项，以此类推）

最后，更合适的方法是使用

：第一种类型

例如：

div.image img:first-child {}

div.image > img:first-child {}

或：

或者（如果还有其他元素，比如任何图像之前的

：

div img:first-of-type

如果您有可能拥有一个包含类image的div，该类image中包含图像，另一个div中包含图像，如下所示：

HTML:

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

或：

或：

关于和关于以及关于和关于的文件

请注意，

：nth-child（）

和

：type

中的第一个是CSS3选择器，在使用IE时支持有限。有关浏览器支持的详细信息，请参阅

---

考虑一些有助于标准化IE的东西。

如果您想在DIV中创建第一个图像（前面可能还有其他元素），则需要

类型的第一个
，而不是
第一个子

div > img:first-of-type {}

考虑以下html

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


段，这是：第一个孩子


有关更多详细信息，请访问
article>img：第一个孩子{
边框：1px实心#f00；
}

如果所有子元素都将成为
img
元素，那么
类型的第一个
比
类型的第一个更好吗？编辑了我的答案。在任何情况下，类型的第一个将是一个更好的整体解决方案，因为它只对img标记更具体。如果在任何时候修改此HTML以包括，例如标题b在图片之前（这不是一个不合理的想法），：第一个孩子会崩溃，解决方案是使用：first of type to fix。为什么不直接切入主题并使用：first of type in first？我看不出有什么理由不这么做。“使用IE时支持有限”此外，Modernizer不支持polyfill选择器-您可以使用Selectivizr来实现这一点。
div > img:first-of-type

div > img:first-of-type {}

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