`table > tr > td` が HTML テーブルの `td` 要素を選択しないのはなぜですか?

tr > td` HTML テーブルの `td` 要素を選択しますか? " />

HTML テーブルでの子セレクターの制限について理解する

HTML では、テーブル構造は、table、tbody、tr、td などのネストされた要素で構成されます子孫セレクター (>) は特定の要素の子孫である要素に一致しますが、子セレクター (>) はより具体的であり、直接の子である要素のみに一致します。

td は tr と table の両方の子孫であるにもかかわらず、tr の直接の子にすぎません。これは、ブラウザがテーブル内に tbody 要素を暗黙的に追加するためです。したがって、HTML テーブルのコンテキストでは、セレクター テーブル > td は機能しません。

例と説明

次の HTML コードを考えてみましょう:

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

この例では、td 要素は直接の子ではありません。図に示すように、ブラウザは table 要素と tr 要素の間に tbody 要素を暗黙的に追加しています。以下:

<table>
  <tbody density="compact">
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

したがって、子セレクターを使用して td 要素を選択するには、パスに tbody 要素を含める必要があります:

table > tbody > tr > td

結論

子セレクター (>) は、要素の直接の子にのみ一致します。 HTML テーブルの場合、td 要素は table 要素の子孫ですが、ブラウザによって tbody 要素が暗黙的に追加されるため、直接の子ではありません。子セレクターを使用してテーブル内の td 要素を正確に選択するには、選択パスに tbody 要素を含める必要があります。

以上が`table > tr > td` が HTML テーブルの `td` 要素を選択しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。