为什么我的直系后代选择器不起作用？答案

【问题标题】：Why doesn't my direct descendant selector work?为什么我的直系后代选择器不起作用？
【发布时间】：2017-01-15 11:59:14
【问题描述】：

我的直系后代选择器有问题。看一个简单的例子：

.myDiv > table tr:first-child td {
  font-weight: bold;
  text-align: center;
}

<div class="myDiv">
  <table style="width:100%">
    <tr>
      <td style="width:37%">Revenue & Cost</td>
      <td style="width:43%">Name</td>
      <td style="width:20%">Income</td>
    </tr>
    <tr>
      <td>column 1</td>
      <td colspan="2">
        <table id="tableChild" width="100%">
          <tr>
            <td>child 1 - Should NOT bold</td>
            <td>child 2 - Should NOT bold</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

如您所见，它会影响 table id tableChild。我希望在第一张桌子的第一行上得到一个粗体字。

这是我的JSFiddle

【问题讨论】：

它正在选择 any tr 元素的第一个子元素
你有两个tds 是第一个孩子；带有标题的那个是外部表的第一个孩子，而带有非粗体内容的那个是该内部表的第一个孩子。也许使用代替标题？
@mherzig 不是，th 应该始终用于该元素专用的标题。
@Martin 同意，我太客气了 :)

【解决方案2】：

浏览器会填充您缺少的表格元素：

试试这个：

.myDiv > table > tbody > tr:first-child td

https://jsfiddle.net/85t8qm5r/3/

【讨论】：

问题不是选择器没有匹配正确的元素，而是选择器匹配了错误的元素。（您的选择器是正确的；只是推理不正确。）
@BoltClock，来自问题：我希望在第一个表的第一行上获得粗体。问题中的选择器缺少 DOM 元素，错过了由作者添加，但由浏览器添加。
选择器使用的是后代组合器，而不是子组合器，因此它不必指定 tbody。它匹配所有正确的元素就好了 - 问题是它也匹配嵌套表中的单元格，这不是提问者想要的。尽管解决方案确实需要在选择器中指定 tbody，但有问题的是后代组合器的使用，而不是缺少的 tbody。
@BoltClock，也许我应该在答案中解释一下。我理所当然地认为切换到子组合器是可以理解的（因为 OP 两者都使用）。感谢您的澄清。