本文介绍使用现代 CSS :has() 选择器或原生 JavaScript 快速定位并样式化包含 .signs 元素的 单元格，无需引入 jQuery，兼顾简洁性与浏览器兼容性考量。 本文介绍使用现代 CSS `:has()` 选择器或原生 JavaScript 快速定位并样式化包含 `.signs` 元素的 `` 单元格，无需引入 jQuery，兼顾简洁性与浏览器兼容性考量。在 HTML 表格中，若需为包含特定子元素（如 ）的 单元格统一添加边框（例如用于可视化 rowspan/colspan 范围），传统 CSS 无法直接“反向选择”父元素——但现代浏览器已原生支持 :has() 关系选择器，提供了声明式、零 JS 的优雅解法：/* ✅ 推荐：纯 CSS 方案（Chrome 105+、Firefox 121+、Safari 15.4+） */ td:has(> .signs) { border: 2px dashed #3b82f6; position: relative; /* 避免边框影响布局时可选 */ }该选择器精准匹配直接子级为 .signs 的 （> 确保层级准确），语义清晰且性能优异。若需兼容较老浏览器（如 IE 或旧版 Safari），可采用轻量级 JavaScript 方案： 不遍历全部 ，而是反向从目标子元素出发，利用 closest('td') 高效获取最近的父 —— 代码更简短、DOM 查询更少、性能更优：// ✅ 推荐：原生 JS 方案（兼容所有现代浏览器） document.querySelectorAll('.signs').forEach(el => { const parentTd = el.closest('td'); if (parentTd) { parentTd.classList.add('has-signs'); // 添加自定义类，便于 CSS 维护 } });配合 CSS：.has-signs { border: 2px dashed #3b82f6; }⚠️ 注意事项： :has() 不支持在 CSS 中作为伪类用于动态插入的元素（如通过 innerHTML 新增的 .signs 需重新触发样式计算，但通常自动生效）； closest() 返回 null 若无匹配祖先，务必判空； 避免在循环中频繁操作 style 属性（如 element.style.border），优先使用 classList + 外部 CSS，利于维护与复用； 若表格结构复杂（如嵌套表格），closest('td') 仍能准确捕获最近的 ，无需担心跨层误匹配。综上，优先采用 td:has(> .signs) 实现声明式样式；对兼容性有硬性要求时，querySelectorAll('.signs').forEach(...closest('td')) 是最简洁、高效、无依赖的 JavaScript 替代方案。