CSS 子セレクターが深くネストされた要素で機能しないのはなぜですか?

CSS 子セレクター: 子孫を直接選択できないのはなぜですか?

CSS では、子セレクター (>) は直接要素間の親子関係。ただし、子セレクターを子孫の子孫に適用すると失敗する可能性があります。次の例を考えてみましょう。

table > tr > td

td 要素は tr 要素の直接の子であり、tr は table 要素の直接の子であるため、このセレクターは td 要素を正しく選択します。ただし、次のセレクターは失敗します。

table > tr > td

欠落している tbody 要素について

HTML ドキュメントでは、明示的に定義されていない限り、tr 要素を含む tbody 要素が暗黙的に作成されます。そのため、tr は table の直接の子になることはなく、子セレクターに必要な直接の親子関係が壊れます。

解決策: tbody セレクターの追加

Toこの問題を解決するには、tbody セレクターを追加して、テーブルとテーブルの間のギャップを埋める必要があります。 tr:

table > tbody > tr > td

XHTML ドキュメントの影響

application/xhtml xml として機能する XHTML ドキュメントは、暗黙的な tbody 要素を作成しません。したがって、このコンテキストでは、上記のセレクターは依然として失敗します。 tbody 要素を明示的に追加するか、別のアプローチを使用する必要があります。

以上がCSS 子セレクターが深くネストされた要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。