html - 如果没有 <thead>，则对表的第一列进行不同的样式设置

Question

这就是我要实现的目标:

这是我要设置样式的标记:

  <h2>Table with no header</h2>
  <table>
    <tbody>
      <tr>
        <td>First column - bold</td>
        <td>Second column</td>
      </tr>
      <tr>
        <td>First column - bold</td>
        <td>Second column</td>
      </tr>
    </tbody>
  </table>

  <h2>Table with a header</h2>
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First column - not bold</td>
        <td>Second column</td>
      </tr>
      <tr>
        <td>First column - not bold</td>
        <td>Second column</td>
      </tr>
    </tbody>
  </table>

关于如何实现预期结果的任何想法？

Answer 1

这样做，使用直接子选择器 >、first-child 和 :not()

table > *:first-child:not(thead) td:first-child {
  font-weight: bold;
}

示例

table > *:first-child:not(thead) td:first-child {
  font-weight: bold;
}

<h2>Table with no header</h2>
<table>
  <tbody>
    <tr>
      <td>First column - bold</td>
      <td>Second column</td>
    </tr>
    <tr>
      <td>First column - bold</td>
      <td>Second column</td>
    </tr>
  </tbody>
</table>

<h2>Table with a header</h2>
<table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First column - not bold</td>
      <td>Second column</td>
    </tr>
    <tr>
      <td>First column - not bold</td>
      <td>Second column</td>
    </tr>
  </tbody>
</table>