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

親を知らずに任意の子要素を選択する

動的コードを扱う場合、親要素が対象となる子は不明。これは、子セレクターを使用して特定の要素を選択しようとするときに問題を引き起こします。

N 番目の子セレクターによる救済

幸いなことに、n 番目の子セレクターは次の解決策を提供します。この問題。 first-child や last-child とは異なり、nth-child() は親要素を指定せずに使用できます。親の ID に関係なく、現在のコンテキスト内で n 番目の子を選択するだけです。

例:

次の HTML 構造を考えてみましょう:

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

2 番目の段落を選択するには、次のコマンドを使用できます。 selector:

.select-me:nth-child(2)

なぜ :first、:last、または :nth セレクターを使用しないのですか?

BoltClock で述べたように、ルート () は別の要素の子です。 :first のようなセレクターを使用すると、現在の要素の最初の子、または現在の要素の親の最初の子のいずれかを参照する可能性があるため、あいまいになります。この曖昧さは、選択範囲を明確に指定する :first-child、:last-child、および :nth-child() を使用することで回避されます。

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