css子选择器不适用于thead中的元素

Posted 2023-03-06

【中文标题】css子选择器不适用于thead中的元素

【英文标题】：css child selector does not work towards th elements in a thead

【发布时间】：2015-03-07 21:44:53

【问题描述】：

我有下表：

<table class="table-container">
  <thead class="table-heading">
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="table-column">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

如果我在 css 中执行以下操作：

.table-body > tr > td 
  padding: 25px;

它没有任何问题。

但如果我在 css 中执行以下操作：

.table-heading > th 
  padding: 25px;

即使 th 元素是 thead 元素的子元素，它也不起作用。 有谁知道为什么这不起作用？

【问题讨论】：

您的标记中实际上并没有这些类，是吗？我真的不明白为什么你不能在选择器中使用 tbody 和 thead。

【参考方案1】：

您错过了<thead> 中的<tr> 元素。现代网络浏览器动态添加<tr>，因此.table-heading > th 不会匹配ths，因为它们不是.table-heading 元素的直接后代，而是tr。

例如，试试.table-heading > tr > th 选择器。

.table-heading > tr > th 
  padding: 25px;
  background-color: gold;

<table class="table-container">
  <thead class="table-heading">
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="table-column">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

【讨论】：

还有另一个不信任表的原因；它们永远不会像你想象的那样。

谢谢。我之前已经通过 w3c 验证运行它几次，但我认为此时我正在编写足够有效的 html..但显然我错过了我也需要 tr 在 thead 中。 @Katana 如果您知道一种更好的方法来呈现符合表特征的数据库中的数据，那么请告诉我

@sundance 不，抱歉我太小气了；老实说，对于实际的数据表示，表格确实很有意义。只是许多 Web 开发人员在应该避免使用表格的情况下使用表格。

【参考方案2】：

因为您的 HTML 无效，并且大多数浏览器通过将您的 <th>s 包装在 <tr>s 中来纠正它。所以正确的选择器应该是：

.table-heading > tr > th 
  padding: 25px;

jsFiddle example