子セレクターがテーブルのセルのスタイルを設定できないのはなぜですか?

テーブル構造における子セレクターと子孫セレクター

HTML ドキュメントで要素を選択するとき、開発者は多くの場合、子セレクター (>) を使用して直接の子および子孫セレクターをターゲットにして、ネストされた要素をターゲットにします。ただし、子セレクターが予期せず失敗すると思われるシナリオもあります。

次の例を考えてみましょう。

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

最初のルールは、すべての

を正常に選択します。 内の要素 内の要素要素。ただし、子セレクター (>) を使用する 2 番目のルールでは、 を挿入します。含める要素 要素。その結果、実際の要素構造は次のようになります。この変更された構造では、はもはや

のスタイルを設定できません。 この動作に困惑した開発者は、	以来、次のように考えているかもしれません。 table > tbody > tr > td { background-color: blue; } HTMLの要素。デフォルトでは、ブラウザは

の直接の子ではなく、むしろ の子であり、それ自体が の子です。したがって、>セレクターは の直接の子ではないためです。この問題を解決するには、開発者は tbody 要素を明示的に選択する必要があります。これにより、子セレクターが正しいオブジェクトをターゲットにすることが保証されます。変更された構造内の要素。さらに、tbody 要素が HTML ドキュメントに明示的に追加されている場合、同じセレクターを使用できます。

をターゲットにできませんこれは

以上が子セレクターがテーブルのセルのスタイルを設定できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。