テーブル構造における子セレクターと子孫セレクター
HTML ドキュメントで要素を選択するとき、開発者は多くの場合、子セレクター (>) を使用して直接の子および子孫セレクターをターゲットにして、ネストされた要素をターゲットにします。ただし、子セレクターが予期せず失敗すると思われるシナリオもあります。
次の例を考えてみましょう。
table tr td {
background-color: red;
}
table > tr > td {
background-color: blue;
}最初のルールは、すべての
| のスタイルを設定できません。
この動作に困惑した開発者は、 | 以来、次のように考えているかもしれません。
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>ログイン後にコピー table > tbody > tr > td {
background-color: blue;
}ログイン後にコピー | を挿入します。含める要素
| をターゲットにできませんこれは |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
