CSS last-childはすべてを選択しますか？

Question

私は以下のコードが期待通りに機能しない理由を理解しようとしています。 基本的には、アップのimgはwidth: 60px、フェデックスのimgはwidth: 100pxであることを望みます。

私のマークアップは次のとおりです。

.delivery-services { 

    &:nth-child(3) img { 
    width: 100px; 
    } 

    &:last-child img { 
    width: 60px; 
    } 
} 

しかし、両方のimgがlast-childの影響を受けていることが表示されます：

<div class="delivery-services"> 
    <span>Delivery Services</span> 
    <br> 
    <a href="#"><img src="img/fedex.png" alt="fedex" /></a> 
    <a href="#"><img src="img/ups.png" alt="ups" /></a> 
</div> 

SCSSです！

Answer 1

は、ブラウザがあなたのセレクタ.delivery-services:last-child imgを処理する方法である：

1. は、クラス.delivery-services持つ要素を検索し、それが最後の子だことを確認してください。それは<div class="delivery-services">を見つけ、実際に最後の子供です。あなたは少し、このようなあなたのHTMLを変更した場合：

   <div class="delivery-services"> 
       <span>Delivery Services</span> 
       <br> 
       <a href="#"><img src="img/fedex.png" alt="fedex" /></a> 
       <a href="#"><img src="img/ups.png" alt="ups" /></a> 
   </div> 
   <div>I am last child now</div>` 
   

   あなたのセレクタがどのimg要素と一致しないことがわかります。

2. スタイルwidth: 60px;が全てimgの要素に適用される理由です第一歩

に見つかった要素内のすべてのimgの要素を検索します。

また、これらの画像でクラスを使用することをお勧めします。 nth-childセレクタは定期的なパターンに適しています。たとえば、3行おきに緑色の背景が必要です。

.delivery-services { 

    :nth-child(3) img { 
    width: 100px; 
    } 

    :last-child img { 
    width: 60px; 
    } 
} 

Answer 2

現在、あなたは.delivery-services :: nth-child（3）を持っています。これは、それが親の3番目の子である.delivery-services要素に適用されることを意味します。それはあなたが探しているものではありません。 .delivery-servicesの3番目の子である<a>を探しています。だから、であるためにあなたのCSSを必要とする：ここで

.delivery-services { 

    & a:nth-child(3) img { 
    width: 100px; 
    } 

    & a:last-child img { 
    width: 60px; 
    } 
} 

Answer 3

CSSで作業する場合、あなたは操作の順序を考慮する必要があります：あなたはnth-childセレクターを使用する必要がある場合はここで

はあなたの問題を修正です。あなたが提供した例では、その階層について考える。スタイルを適用するとき、スタイルを上に設定して作業します。たとえば、delivery-services - > a - > imgなどです。これをサブクラスに適用するには、最初のa内のイメージを探していることを理解してください。したがって、私は次のようにそれを設定したい：

.delivery-services a:nth-child(4) img{ 
    width: 100px; 
    } 
.delivery-services a:nth-child(3) img{ 
    width: 60px; 
} 

しかしながら、このような特定のインスタンスのために、私は、各インスタンスまたはインラインスタイルの異なるクラスを割り当てるだろう。 nth-childはループや反復に最適です。