子セレクターと子孫セレクター: 子セレクターが失敗するのはどのような場合ですか?

CSS の子セレクターと子孫セレクター

CSS では、子セレクター (>) は親子関係を表し、子孫セレクター (>) は親子関係を表します。スペースを含む) は、親内のすべての子孫要素を対象とします。どちらのセレクターも特定の要素を選択するために使用できますが、その使用には特定の制限があります。

上記の例では、td が tr の直接の子であり、tr であるため、テーブル tr td を選択すると、td 要素が正しく取得されます。 table の直接の子です。ただし、table > を使用する場合は、 tr>同じ要素をターゲットにしようとすると、セレクターは失敗します。

この動作は、特定の要素に応答してブラウザーによって生成される HTML 構造に起因します。ブラウザは、暗黙的な tbody 要素を table 要素内に自動的に追加して、tr 要素を囲みます。これは、親子関係において、tr がテーブル内で直接ネストされていないことを意味します。代わりに、これは tbody 要素内にあります。

したがって、意図したとおりに td 要素を選択するには、暗黙的な tbody 要素を考慮した次のセレクターを使用する必要があります。

table > tbody > tr > td

次のように含めます。セレクター内の tbody を使用すると、適切な親子関係をたどり、td を正確にターゲットにできます。

したがって、このシナリオでは、ブラウザによって追加された暗黙的な tbody 要素のため、子セレクターは目的の要素を正しく選択できませんが、子孫セレクターは期待どおりに機能します。

以上が子セレクターと子孫セレクター: 子セレクターが失敗するのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。