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>元素。现代网络浏览器会动态添加<tr>，因此.table-heading > th不会与th匹配，因为它们不是.table-heading元素的直接后代，而是tr }。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

由于您的HTML无效且大多数浏览器都将<th>包裹在<tr>中，因此无法解决问题。所以正确的选择器将是：

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

<强> jsFiddle example

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

2 个答案: