如何通过CSS/JS隐藏含inactive类span对应行的href链接

核心实现（CSS方案，优先推荐） #

利用CSS的:has()伪类可直接实现需求，无需修改原有HTML结构：

/* 匹配包含.inactive状态的表格行，隐藏该行内所有链接 */
.tg tbody tr:has(td > span.inactive) a {
  display: none;
}

原理说明 #

• :has()伪类会检测当前<tr>是否包含后代元素td > span.inactive（即STATUS列带有inactive类的span标签）
• 匹配成功后，自动将该行内所有<a>标签设置为display: none，完全对应你期望的效果——VIEW、EDIT列的链接，以及STATUS列内的链接都会被隐藏

旧浏览器兼容方案（JS备选） #

如果需要兼容不支持:has()的旧浏览器（如Chrome 104及以下、Firefox 120及以下），可以用JavaScript实现：

// 遍历所有表格行，检查是否包含inactive状态
document.querySelectorAll('.tg tbody tr').forEach(row => {
  if (row.querySelector('td > span.inactive')) {
    // 隐藏该行所有链接
    row.querySelectorAll('a').forEach(link => {
      link.style.display = 'none';
    });
  }
});

效果验证 #

将上述CSS或JS代码添加到项目后，原始表格中带有inactive类的行（ID3、ID4）会自动隐藏所有链接，与你提供的期望效果代码完全一致。

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