html - 如果元素包含特定类型的子元素，如何使用 CSS 选择器消除元素

Question

让我举个例子来澄清我的问题。

假设我有如下表格:

<table>
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>

  <tr>
    <td>elem1</td>
    <td>elem2</td>
  </tr>

  <tr>
    <td>elem3</td>
    <td>elem4</td>
  </tr>
</table>

我想显示包含 <td> 的表格行元素是可点击的，所以我试图将鼠标指针光标悬停在 <tr> 上时更改为手形包含 <td>元素。

我可以通过如下设置样式来做到这一点:

table tr:not(:first-child) {cursor:pointer;}

表的第一个 child 通常是 <tr>包含 <th> .

问题来了，css样式怎么写消除<tr>包含 <th>以更直观的方式作为直接 child ？

Answer 1

利用 thead 和 tbody 元素，然后使用 CSS 仅定位 tbody 中的行:

table tbody tr {
  cursor: pointer;
}

<table>
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>elem1</td>
      <td>elem2</td>
    </tr>
    <tr>
      <td>elem3</td>
      <td>elem4</td>
    </tr>
  </tbody>
</table>