nth-child セレクターがネストされた要素で機能しないのはなぜですか?

n 番目の子セレクターが機能しないのはなぜですか?

gt;

n 番目の子セレクターを使用しているときにこの問題が発生した可能性があります。スタイリング目的。このセレクターを使用して背景画像をさまざまなソーシャル アイコンに追加したにもかかわらず、すべてのアイコンが同じ外観を表示していることがわかります。これは、コードに何か問題があることを示しています。

問題の詳細

n 番目の子セレクターは、次の要素間の位置に基づいて特定の要素をターゲットにするように設計されています。兄弟要素。ただし、コードでは、セレクター:

#social-links div:nth-child(1),
#social-links div:nth-child(2),
#social-links div:nth-child(3),
#social-links div:nth-child(4),

は #social-links 要素の子である div 要素をターゲットとしています。ただし、これらの div 要素は常に、それぞれのアンカー (a) 要素の唯一の子です。したがって、これらはすべてアンカー要素の最初で唯一の子であるため、n 番目の子セレクターはこれらを区別できません。

正しいアプローチ

修正するにはこの問題では、div 要素ではなくアンカー要素をターゲットにするように nth-child セレクターを調整する必要があります。これにより、どのアンカー要素が特定の背景画像を受け取るかを指定できます:

#social-links a:nth-child(1) div { 
   background-image: url('path/to/image1.svg'); 
}
#social-links a:nth-child(2) div { 
   background-image: url('path/to/image2.svg'); 
}
#social-links a:nth-child(3) div { 
   background-image: url('path/to/image3.svg'); 
}
#social-links a:nth-child(4) div { 
   background-image: url('path/to/image4.svg'); 
}

この変更されたコード構造により、各アンカー要素が兄弟アンカー要素内の位置に基づいて意図した背景画像を受け取ることが保証されます。

以上がnth-child セレクターがネストされた要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。