css - :first-child は、子孫セレクターを使用して要素をターゲットにすると機能しません

Question

何らかの理由で、クラスを持つ 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;
}

Answer 1

これを試して：

.productdescription h3+p img
{
Your styles here
}

はい、すべての img タグは親タグの最初の子です (場合によっては p、他の場合は a)。したがって、すべての img タグを選択する必要があります。これにより、.productdescription 内の h3 が前にある ap タグ内の img のみが選択されます。