私の n 番目の子セレクターがソーシャル アイコンで機能しないのはなぜですか?

n 番目の子セレクターが機能しない: その理由と修正方法

n 番目の子セレクターは、次の要素に基づいて要素を選択するための強力なツールです。親要素内での位置。ただし、セレクターが期待どおりに機能しない理由が混乱することがあります。

提供されたコードの場合、n 番目の子セレクターは、#social- 内のソーシャル アイコンに異なる背景画像を適用するために使用されます。リンク部n 番目の子の条件にもかかわらず、すべてのアイコンが同じように表示されます。この問題は、セレクターの仕組みについての誤解から生じています。

nth-child の仕組み

nth-child セレクターは、同じ親要素を共有する兄弟要素をカウントします。提供された HTML では、各 div.social-logo はそのアンカー タグの唯一の子です。したがって、n 番目の子セレクターは、指定された値に関係なく、1 つの要素のみをカウントします。

ただし、#social-links 内のアンカー タグは互いに兄弟です。その結果、n 番目の子セレクターは、次の構文を使用して個々のアンカー タグを効果的にターゲットにすることができます。

<code class="css">#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div</code>

div 子要素の代わりにアンカー タグをターゲットにすることで、n 番目の子セレクターは次の要素を区別できるようになりました。

解決策

問題を解決するには、元の nth-child 宣言を次のものに置き換えます:

<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 番目の子セレクターは、意図したとおりに各ソーシャル アイコンに異なる背景画像を正しく適用します。

以上が私の n 番目の子セレクターがソーシャル アイコンで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。