如何使用CSS选择器排除含特定子元素的元素？表格交互示例

嘿，针对你这个表格的需求，用CSS的:has()伪类就能完美解决，刚好能精准排除包含<th>的表头行，只给纯<td>的数据行加hover手型效果！

直接上解决方案，先看适配你场景的CSS代码：

/* 仅让不含<th>的<tr>在鼠标悬停时显示手型指针 */
tr:not(:has(th)):hover {
  cursor: pointer;
}

原理说明： #

• :has(th) 这个伪类会精准匹配所有包含<th>子元素的<tr>——也就是你表格里的表头行
• :not() 伪类的作用就是排除这些被匹配到的表头行，剩下的自然就是只包含<td>的数据行
• 最后给这些数据行加上hover状态下的cursor: pointer，就能实现你要的效果啦

兼容性补充： #

现在Chrome、Firefox（121版本及以上）、Safari这些主流浏览器都已经支持:has()伪类了。如果需要兼容更老旧的浏览器，也可以用更稳妥的类名方案：

给表头行加一个专属类名，比如table-header：

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

然后用类名排除：

tr:not(.table-header):hover {
  cursor: pointer;
}

这个方案兼容性拉满，适合所有浏览器环境~

内容的提问来源于stack exchange，提问作者Eugene