親を知らずに n 番目の子要素を選択するにはどうすればよいですか?

ユニバーサル子セレクター: 親から独立して n 番目の子要素を選択する

問題:

特定の子要素を選択するのは難しい場合がある親要素が不明であるか、動的な名前が付いている場合。 :first-child セレクターと :nth-child セレクターは存在しますが、これらは指定された親のスコープ内の子のみを対象とします。

質問:

nth, first はどのように実行できますか? 、最後の子要素は親を知らずに選択されます。 element?

答え:

一般的な認識に反して、:first-child セレクターと :nth-child セレクターが効果的に機能するためには、特定の親要素は必要ありません。これらのセレクターは、親が指定されていない場合でも、親内の位置に基づいて適切な子要素を自動的にターゲットにします。

説明するには、次のコードを考えてみましょう。

<youdontknowwhat!>
   <p class="select-me">One</p>
   <p class="select-me">Two</p>
</youdontknowwhat!>

To selectこの例の 2 番目の段落 with.select-me クラスでは、次のセレクターを使用するだけです:

.select-me:nth-child(2)

このセレクターは、名前やタイプに関係なく機能します。 n 番目の子を直接指定するため、親要素です。

説明:

:first-child セレクターと :nth-child セレクターはユニバーサル子セレクター '*' を利用します。これは任意の要素に一致します。したがって、特定の親を指定せずに、任意の子要素を選択するために使用できます。 nth-child(n) 構文は、親内の n 番目の子要素を表します。「n」は指定された位置です。

以上が親を知らずに n 番目の子要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。