如何为包含.signs类元素的td标签添加自定义类？

现代浏览器最优方案（推荐） #

利用原生CSS的:has()伪类选择器，直接匹配包含.signs子元素的<td>，这是最简洁高效的方式，无需手动遍历：

// 批量为包含.signs的td添加自定义类
document.querySelectorAll('td:has(.signs)').forEach(td => {
  td.classList.add('highlight-span');
});

对应的CSS样式：

.highlight-span {
  border: 2px solid #2196F3; /* 可根据需求调整边框样式 */
}

:has()是现代浏览器（Chrome 101+、Firefox 121+、Safari 15.4+）支持的原生选择器，能直接从父元素层面筛选出包含指定子元素的节点，代码简洁且性能优异。

兼容旧浏览器的备选方案 #

如果需要兼容不支持:has()的旧版本浏览器，可以换个思路：先找到所有.signs元素，再通过closest()方法获取它们的父级<td>，这种方式比遍历所有<td>更高效（因为.signs的数量通常远少于<td>）：

// 先定位所有.signs元素，再向上找到对应的td并添加类
document.querySelectorAll('.signs').forEach(signEl => {
  const targetTd = signEl.closest('td');
  if (targetTd) { // 确保父元素确实是td，避免非表格内的.signs元素干扰
    targetTd.classList.add('highlight-span');
  }
});

同样搭配上面的CSS样式即可实现需求。

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