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

Question

我有下表：

<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 元素的子元素，它也不起作用。有谁知道为什么这不起作用？

Answer 1

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

Answer 2

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

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

jsFiddle example

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

css child selector does not work towards th elements in a thead

css

html

css-selectors

html-table