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

表格的第一个孩子通常是包含<tr>的{{1}}。

问题是，如何使用更直观的方式编写css样式以消除包含<th>作为直接子项的<tr>？

Answer 1

tr td {cursor: pointer}会做得很好：

tr td {cursor: pointer}

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

或者只是td {cursor: pointer}也没关系。

Answer 2

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

Answer 3

您还可以将类添加到可编辑的tr：

tr.editable {
  cursor: pointer;
}

<table> 
   <tr>
     <th>header1</th>
     <th>header2</th>
   </tr> 
   <tr class="editable">
     <td>elem1</td>
     <td>elem2</td>
   </tr>
   <tr class="editable">
     <td>elem3</td>
     <td>elem4</td>
   </tr> 
</table>

Answer 4

您还可以使用CSS伪类：

它将在表格的第二行到最后一行进行选择。

table tr:nth-child(n+2) {
   cursor: pointer;
}

<table> 
   <tr>
     <th>header1</th>
     <th>header2</th>
   </tr> 
   <tr class="editable">
     <td>elem1</td>
     <td>elem2</td>
   </tr>
   <tr class="editable">
     <td>elem3</td>
     <td>elem4</td>
   </tr> 
</table>

Answer 5

您可以简单地引用作为其子tr的所有<td>，它会自动省略tr个<th>代码

 table tr td {
    cursor:pointer;
 }

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

5 个答案: