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

你错过了里面的<tr>元素<thead>.现代Web浏览器<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>

Answer 2

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

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

jsFiddle例子