为何table>tr>th CSS规则不生效？table tr>th却可行？

我编写了如下HTML代码，试图将表格的表头行设置为加粗样式：

<!DOCTYPE html>
<html>

<head>
  <style>
    table>tr>th {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Amount</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>5</td>
      <td>orange</td>
    </tr>
  </table>
</body>

</html>

使用table>tr>th这一CSS规则时并未生效，但改用table tr>th规则却能正常生效。我原本认为<tr>是<table>的直接子元素，<th>是<tr>的直接子元素，请问我哪里理解错了？

解答 #

核心原因是浏览器会自动为表格插入隐式的<tbody>元素，哪怕你的HTML代码里没写这个标签。

你写的HTML里<tr>紧跟在<table>后，但浏览器渲染页面时，会自动把所有不在<thead>/<tfoot>里的<tr>包裹到<tbody>中。此时<tr>的直接父元素是<tbody>，而非<table>——这就导致table>tr>th这个直接子选择器完全匹配不到目标元素，自然不会生效。

而table tr>th用的是后代选择器（空格），它会匹配<table>下所有层级的<tr>内部的<th>，不管<tr>外层有没有被自动插入的<tbody>，所以能正常选中表头单元格并应用样式。

如果想继续使用直接子选择器，有两种可行方案：

• 显式添加<tbody>标签：在HTML的<table>内明确写出<tbody>，然后使用选择器table>tbody>tr>th
• 兼容隐式与显式情况：使用复合选择器table>tr>th, table>tbody>tr>th，同时匹配有没有<tbody>的场景

内容的提问来源于stack exchange，提问作者Leon Schreiber