Question

出于某种原因，我无法在类productdescription的div中选择第一次出现的img元素。

这是因为img每次都在p内吗？不幸的是，感谢WordPress，img每次都必须嵌套在p内。

这是我的HTML：

  <div class="productdescription"><h3>Product Description</h3>
    <p>
        <img class="alignleft" src="#">
    </p>
    <p>Text here.</p>
    <p>
        <a href="#">
            <img class="alignleft" src="#">
        </a>
        <a href="#">
            <img class="alignleft" src="#">
        </a>
        <a href="#">
            <img class="alignleft" src="#">
    </p>
</div>

我的CSS：

 .productdescription img {
        float:left;
        width:30%;
        height:auto;
        margin:10px 20px 20px 0px;
 }

.productdescription img:first-child  {
    width:45%;
    border-style:solid;
}

Answer 1

问题：

在此处使用后代选择器将使您的CSS样式定位到每个后代元素的img:first-child 。

例如，如果您有以下标记：

<div class="productdescription">
   <p>
     <img class="alignleft" src="#" class="targetsMe"> <!-- This is selected -->
   </p>
   <p>
     <a href="#">
       <img class="alignleft" src="#" class="targetsMe"> <!-- So is this -->
     </a>
     <a href="#">
       <img class="alignleft" src="#" class="targetsMe"> <!-- And this -->
       <img class="alignleft" src="#"> <!-- But not this -->
     </a>
   </p>
</div>

您当前的选择器.productdescription img:first-child将定位我用类img表示的每个targetsMe。

Here's the jsFiddle显示了这一点。

解决方案：

在您的情况下，由于您要定位的图片始终是p元素的唯一直接替代，您可以选择它是这样的：.productdescription p > img:first-child

jsFiddle example here.

Answer 2

试试这个：

.productdescription h3+p img
{
Your styles here
}

是的，所有img标签都是父标签的第一个子标签（在某些情况下为p，在其他情况下为a）。所以你应该选择所有的img标签。这将仅选择在.productdescription

中的h3之前的p标签内的img

Answer 3

问题是你正在选择所有的 img ，对吗？

如果您只想选择第一个，则不能使用.productdescription img:first-child，因为这样您就可以选择所有 img 这是其父元素的第一个元素 - 无论父母是谁。

要仅选择您可能使用.productdescription p > img的第一张图片，因为其他图片都包含 a 元素。或者.productdescription h3+p img，因为这样您只选择 h3 元素后面的 p 元素。

：使用后代选择器定位元素时，第一个子节点不起作用

3 个答案: