私の「nth-child」セレクターが期待どおりに動作しないのはなぜですか?

nth-child が適切に動作しないのはなぜですか?

nth-child セレクターは、次のことを可能にする CSS の強力なツールです。親要素内の位置に基づいて要素をスタイル設定します。ただし、n 番目の子セレクターが適切に動作していないように見える問題が発生する場合があります。

この最も一般的な理由の 1 つは、n 番目の子セレクターを使用して次のことを実行しようとしている可能性があることです。兄弟ではない要素を選択します。 n 番目の子セレクターは兄弟をカウントします。これは、同じ親要素を持つ要素のみを考慮することを意味します。

たとえば、次の HTML コードでは、div.social-logo 要素はすべて a の子です。

<code class="html"><div id="social-links">
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
</div></code>

これを修正するには、nth-child セレクターを使用して、div.social-logo 要素の代わりに a 要素を選択する必要があります。 。たとえば、次の CSS コードは、#social-links div 内の最初の a 要素のスタイルを設定します。

<code class="css">#social-links a:nth-child(1) {
  background-color: red;
}</code>

n 番目の子セレクターが正しく動作しないもう 1 つの理由は、構文が正しくありません。 n 番目の子セレクターの正しい構文は次のとおりです。

nth-child(n)

ここで、n は選択する要素の位置です。たとえば、nth-child(1) は最初の要素を選択し、nth-child(2) は 2 番目の要素を選択する、というように続きます。

間違った構文を使用している場合、nth-child セレクターは正常に動作しなくなります。たとえば、次の CSS コードは機能しません:

<code class="css">#social-links div:nth-child[1] {
  background-color: red;
}</code>

n 番目の子セレクターは角かっこと一緒に使用すべきではないため、このコードは正しくありません。代わりに、かっこを使用する必要があります。

これらのヒントに従うことで、CSS コード内で n 番目の子セレクターが適切に動作していることを確認できます。

以上が私の「nth-child」セレクターが期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。