本文介绍两种现代、高效的方法，为包含 .signs 元素的 父节点添加边框样式：一是使用原生 CSS :has() 伪类（推荐，简洁声明式），二是在 JavaScript 中通过 closest() 定位父级 并动态添加类名，兼顾兼容性与灵活性。
本文介绍两种现代、高效的方法，为包含 `.signs` 元素的 `
在实际表格开发中，常需可视化标记具有跨行/跨列语义的单元格（例如含 .signs 的 <span></span>），但 CSS 传统上无法“向上选择”——即不能直接基于子元素状态设置父元素样式。所幸，现代浏览器已广泛支持 :has() 选择器，它让这一需求变得极其简洁：
/* ✅ 原生 CSS 方案：为包含 .signs span 的 td 添加边框 */
td:has(> .signs) {
border: 2px solid #4a6fa5;
box-shadow: inset 0 0 4px rgba(74, 111, 165, 0.3);
}该规则精准匹配直接子元素为 .signs 的 <td>（<code>> 确保层级严谨），无需任何 JavaScript，性能优异且可维护性强。目前 :has() 已获 Chrome 105+、Firefox 103+、Safari 15.4+ 及 Edge 105+ 全面支持（CanIUse 数据）。
若需兼容较老浏览器（如 IE 或旧版 Safari），可采用轻量 JavaScript 方案：遍历所有 .signs 元素，用 closest('td') 向上查找最近的 <td> 父容器，并为其添加自定义类（如 <code>has-signs）：
// ✅ 兼容性方案：为含 .signs 的 td 添加类名
document.querySelectorAll('.signs').forEach(el => {
const parentTd = el.closest('td');
if (parentTd) {
parentTd.classList.add('has-signs');
}
});对应 CSS 即可复用：
.has-signs {
border: 2px solid #4a6fa5;
}⚠️ 注意事项：
- 避免使用
getElementsByTagName('td')全量遍历 +getElementsByClassName('signs')嵌套检查——时间复杂度高，且易因 DOM 动态变化导致遗漏； -
closest()是标准 DOM API，无需依赖 jQuery，体积几乎为零； - 若
.signs可能嵌套在多层元素内（如<td><div><span class="signs">…</span></div></td>），td:has(.signs)仍有效（去掉>即可），而closest('td')同样可靠； - 修改样式时优先考虑 CSS
:has()，仅当明确需支持旧环境时再引入 JS 回退逻辑。
综上，:has() 是当前最优雅、最符合 Web 标准的解决方案；而 closest() 提供了最小侵入性的降级路径——二者结合，即可在保持代码简洁的同时覆盖绝大多数真实场景。
