0

出于某种原因，我无法选择带有 class 的 div 内第一次出现的 img 元素productdescription。

这是因为img每次也在ap内吗？不幸的是，由于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;
}
4

3 回答 3

4

问题：

在此处使用后代选择器将导致您的 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我用 class 表示的每个targetsMe。

这是 jsFiddle显示的。

解决方案：

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

jsFiddle 示例在这里。

于 2013-05-21T23:06:32.510 回答
0

尝试这个：

.productdescription h3+p img
{
Your styles here
}

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

于 2013-05-21T23:19:31.817 回答
0

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

如果你只想选择你不能使用的第一个.productdescription img:first-child，因为这样你就选择了所有img作为它的父元素的第一个元素——不管那个父元素是谁。

仅选择您可能使用的第一张图像.productdescription p > img，因为其他图像都用元素包裹。或者.productdescription h3+p img，因为这种方式只选择h3元素后面的p元素。

于 2013-05-21T23:21:45.253 回答