「table > tr > td」が CSS で期待どおりに表のセルを選択しないのはなぜですか?

tr > td` CSS で期待どおりにテーブルのセルを選択しますか? " />

テーブル構造の子セレクターの制限を理解する

HTML 文書構造では、table > tr > td 要素間の関係は親子であると想定されることがよくあります。ただし、CSS セレクターを使用する場合、子セレクター (>) がこれに対して予期しない動作をする理由を理解することが重要です。

> tr > セレクターは、tr 要素の直接の子孫である td 要素を選択するように見えるかもしれませんが、実際の HTML 構造では、tr 要素の直接の子孫です。 、ブラウザは追加の tbody 要素を暗黙的に導入します。

これは、実際の階層が次のようになることを意味します。 this:

table > tbody > tr > td

結果として、tr 要素は table 要素の直接の子ではなく、tbody 要素の子であるため、セレクター テーブル > td は機能しません。 🎜>

このシナリオで td 要素を正しく選択するには、次を使用する必要があります。セレクター:

table > tbody > tr > td

デモ:

提供された Fiddle [子孫セレクター](http://jsfiddle.net/brLee/1/) 、tr > td セレクターは期待どおりに機能し、tr 要素内のすべての td 要素を選択します。これは、子孫セレクター (>) が、間接的に関連する要素を含む、指定された要素のすべての子孫を選択するためです。

対照的に、提供されている Fiddle [子セレクター](http://jsfiddle.net/) brLee/)、テーブル > を使用します。 tr> td は、tr 要素が table 要素の直接の子ではないため、td 要素を選択しません。

ブラウザの動作:

HTML ドキュメントでは、暗黙的な追加tbody 要素のデフォルトの動作は、テーブルを適切にレンダリングするためのブラウザのデフォルトの動作です。ただし、application/xhtml xml として提供される XHTML ドキュメントでは、この暗黙的な追加は発生しません。そのため、テーブル > に対して子セレクター (>) を使用します。 tr> XHTML ドキュメント内の td は正しく機能します。

以上が「table > tr > td」が CSS で期待どおりに表のセルを選択しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。