为啥我的直系后代选择器不起作用？

Posted 2023-03-06

【中文标题】为啥我的直系后代选择器不起作用？

【英文标题】：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" >
          <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 同意，我太客气了 :)

【参考方案1】：

首先，正确完成对表的定义：

<table>
  <thead>
    <tr> TITLE ROW HERE </tr>
  </thead>
  <tbody>
    CONTENT ROWS HERE
  </tbody>
</table>

那么你的 CSS 选择器就变成了：

.myDiv>table>thead>tr>td 
    ...

【讨论】：

我不知道这个。我是 html 的初学者。我今天学到了一个新东西。感谢您的帮助！

【参考方案2】：

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

试试这个：

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

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

【讨论】：

问题不是选择器没有匹配正确的元素，而是选择器匹配了错误的元素。 （您的选择器是正确的；只是推理不正确。）

@BoltClock，来自问题：我希望在第一个表的第一行上获得粗体。问题中的选择器缺少 DOM 元素，错过了由作者添加，但由浏览器添加。

选择器使用的是后代组合器，而不是子组合器，因此它不必指定 tbody。它匹配所有正确的元素就好了 - 问题是它也匹配嵌套表中的单元格，这不是提问者想要的。尽管解决方案确实需要在选择器中指定 tbody，但有问题的是后代组合器的使用，而不是缺少的 tbody。

@BoltClock，也许我应该在答案中解释一下。我理所当然地认为切换到子组合器是可以理解的（因为 OP 两者都使用）。感谢您的澄清。