当所有文本和图像都包装在 标签中时，CSS 将类添加到 div 中的第一个 img

Question

我们有一个 Wordpress 站点，我们将图片添加到所有帖子的方式使帖子看起来像这样:

<div class="entry-content">
  <p>Some Text</p>
  <p>More Text</p>
  <p><img src="http://something.com"></p> <-- This is the img I'm trying to get</p>
  <p><img src="http://somethingelse.com"></p>
</div>

有没有办法使用 nth-of-type(1) 将类应用到第一张图像？

Answer 1

--已编辑--@发帖人:您可以简单地通过更改 CSS 中的值来定位哪一个做什么。将其与以下链接进行比较:http://jsfiddle.net/SinisterSystems/xgL69/3/

如果你能去掉 <p>标签，使用 first-child : http://jsfiddle.net/SinisterSystems/xgL69/4/

这是给你的快速模型:

http://jsfiddle.net/SinisterSystems/xgL69/2/

HTML:

<div id="cont">
    <p><img src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg" /></p>
    <p><img src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg" /></p>
    <p>Hello</p>
</div>

CSS:

#cont p:nth-of-type(1) img:nth-of-type(1) {
    width:25px;
    height:25px;
}