私のソーシャル アイコンがすべて同じ「nth-child」セレクターを使用しているのはなぜですか?

n 番目の子セレクターを理解する

n 番目の子セレクターを使用してさまざまなソーシャル アイコンに固有の背景画像を適用しようとすると、すべてのアイコンが表示されるという問題が発生する可能性があります同じ。この記事では、この問題の根本的な原因を詳しく掘り下げ、解決策を提供します。

n 番目の子セレクターは、同じ親要素を共有する要素である兄弟間の位置に基づいて要素を選択するように設計されています。ただし、提供されている HTML 構造では、各 div.social-logo は、対応する a 要素の唯一の子です。これは、#social-links コンテナ内の div の数に関係なく、nth-child には子としてカウントされる要素が 1 つだけあることを意味します。

この問題を解決するには、代わりに、以下を含むアンカー要素をターゲットにすることができます。 nth-childを使用したソーシャルアイコン。この HTML 構造には、互いに兄弟である複数のアンカー要素があります。したがって、n 番目の子セレクターを使用して、特定のアンカー要素をターゲットにし、それに応じて一意の背景画像を適用できます。

修正された CSS コードの例は次のとおりです。

<code class="css">#social-links a:nth-child(1) div {
  background-image: url(...);
}

#social-links a:nth-child(2) div {
  background-image: url(...);
}

#social-links a:nth-child(3) div {
  background-image: url(...);
}</code>

この改訂されたアプローチにより、それぞれのアンカー要素が確実にアンカー要素は n 番目の子セレクターのターゲットとなるため、各ソーシャル アイコンに独自の背景画像を効果的に適用できます。

以上が私のソーシャル アイコンがすべて同じ「nth-child」セレクターを使用しているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。