Question

我有一张表如下

<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr></tbody></table>

我想将边框应用于其thead类为info的表

css目前包含

.bordered td{
border: 1px solid #0060a0  !important;
}

Answer 1

您可以使用兄弟选择器

来完成此操作

.bordered thead.info + tbody td

此选择器定位td元素中的所有tbody元素，该元素是thead.info表中.bordered元素的相邻兄弟。这听起来令人困惑，所以这是一个演示：

.bordered thead.info + tbody td  {
  border: 1px solid #0060a0;
}

<table class="bordered">
  <thead class="info">
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

稍微更健壮的解决方案，如果表包含tfoot元素，则需要使用更通用的兄弟选择器。

.bordered thead.info ~ tbody td  {
  border: 1px solid #0060a0;
}

<table class="bordered">
  <thead class="info">
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">Footer</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

CSS - 选择具有特定类的thead的表

1 个答案: