本文介绍两种现代、高效的方法，为包含 .signs 元素的 父节点添加边框样式：一是使用原生 CSS :has() 伪类（推荐，简洁声明式），二是在 JavaScript 中通过 closest() 定位父级 并动态添加类名，兼顾兼容性与灵活性。 本文介绍两种现代、高效的方法，为包含 `.signs` 元素的 `` 父节点添加边框样式：一是使用原生 CSS `:has()` 伪类（推荐，简洁声明式），二是在 JavaScript 中通过 `closest()` 定位父级 `` 并动态添加类名，兼顾兼容性与灵活性。在实际表格开发中，常需可视化标记具有跨行/跨列语义的单元格（例如含 .signs 的 ），但 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 的 （> 确保层级严谨），无需任何 JavaScript，性能优异且可维护性强。目前 :has() 已获 Chrome 105+、Firefox 103+、Safari 15.4+ 及 Edge 105+ 全面支持（CanIUse 数据）。若需兼容较老浏览器（如 IE 或旧版 Safari），可采用轻量 JavaScript 方案：遍历所有 .signs 元素，用 closest('td') 向上查找最近的 父容器，并为其添加自定义类（如 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:has(.signs) 仍有效（去掉 > 即可），而 closest('td') 同样可靠； 修改样式时优先考虑 CSS :has()，仅当明确需支持旧环境时再引入 JS 回退逻辑。综上，:has() 是当前最优雅、最符合 Web 标准的解决方案；而 closest() 提供了最小侵入性的降级路径——二者结合，即可在保持代码简洁的同时覆盖绝大多数真实场景。