N 番目の子セレクターが 1 つの要素だけではなくすべての要素にスタイルを適用するのはなぜですか?

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

n 番目の子セレクターは、兄弟のグループ内の特定の要素をターゲットにするための強力なツールです。ただし、効果的に使用するには、その制限を理解することが重要です。

問題: すべてのソーシャル アイコンが同じに見える

n 番目の子が存在する次の状況を考えてみましょう。ソーシャル アイコンに背景画像を追加するために使用されます:

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

期待される動作: 最初のソーシャル アイコンのみ LinkedIn 背景画像を持つ必要があります。
実際の動作: すべてのアイコンは同じ背景画像を持ちます。

理由: 要素ではなく兄弟をカウントする

n 番目の子セレクターは、要素自体ではなく、ターゲット要素の兄弟の数をカウントします。上記のコードでは、#social-links の div 子要素の数をカウントします。

この場合、div.social-logo 要素は常にアンカー要素の唯一の div 子要素として存在します。したがって、nth-child は常に 1 を返します。これは、すべての要素が同じ背景画像を受け取ることを意味します。

解決策: 親要素の兄弟をターゲット

特定の div.social をターゲットにします。 -logo 要素を使用するには、親アンカー要素の兄弟をターゲットにするようにセレクターを変更する必要があります:

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

アンカー要素の n 番目の子をターゲットにすることで、目的の div.social-logo 要素を正しく選択して適用できるようになりました。それに応じて背景画像も変更されます。

以上がN 番目の子セレクターが 1 つの要素だけではなくすべての要素にスタイルを適用するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。