本文介绍如何用纯 css 的 `:has()` 伪类配合 javascript 动态生成选择器，高效实现数百个分组内所有同组元素的统一悬停高亮，避免重复书写 300+ 条 css 规则。
在现代前端开发中，我们常需实现“悬停任一子项，高亮整个逻辑分组”的交互效果。例如：页面包含 300 组、每组 3 行 <p> 元素，分别标记为 group-1、group-2 … group-300。理想行为是——当鼠标移入任意一个 group-15 元素时，该组全部 3 个元素同时变为蓝色背景。
纯 CSS 本身无法自动泛化匹配（如 :has(.group-*:hover) 不合法），但借助 CSS :has()（已获 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持）与轻量级 JavaScript 初始化脚本，可完全避免手写数百条重复规则，实现可扩展、可维护、零运行时开销的解决方案。
✅ 核心思路：动态生成 .parent:has(.group-X:hover) .group-X 规则
利用 :has() 的父容器感知能力，我们只需为每个唯一 class 名生成一条 CSS 规则。以下为生产就绪的实现代码：
<!DOCTYPE html><html><head> <style> p { margin: 4px 0; padding: 8px; border-radius: 4px; transition: background-color 0.2s; } </style></head><body class="parent"> <p class="group-1">Group 1 — Item 1</p> <p class="group-1">Group 1 — Item 2</p> <p class="group-1">Group 1 — Item 3</p> <p class="group-2">Group 2 — Item 1</p> <p class="group-2">Group 2 — Item 2</p> <p class="group-2">Group 2 — Item 3</p> <p class="group-3">Group 3 — Item 1</p> <p class="group-3">Group 3 — Item 2</p> <p class="group-3">Group 3 — Item 3</p> <!– 更多 group-N… –></body><script> // 1. 获取所有含 "group-" 的元素 const elements = document.querySelectorAll(‘p[class*="group-"]’); // 2. 提取并去重 class 名（支持多 class，如 "group-5 active"） const classNames = new Set(); elements.forEach(el => { el.className.split(/\s+/).forEach(cls => { if (cls.startsWith(‘group-‘)) classNames.add(cls); }); }); // 3. 构建复合选择器：.parent:has(.group-1:hover) .group-1, .parent:has(.group-2:hover) .group-2, … const selectorList = Array.from(classNames) .map(cls => `.parent:has(.${cls}:hover) .${cls}`) .join(‘, ‘); // 4. 注入动态样式（仅执行一次，无性能负担） const style = document.createElement(‘style’); style.textContent = `${selectorList} { background-color: #4a90e2; color: white; }`; document.head.appendChild(style);</script></html>
⚠️ 关键注意事项
浏览器兼容性：:has() 在主流现代浏览器中已稳定支持，但若需兼容 IE 或旧版 Safari（<15.4），需降级为 addEventListener + classList.toggle 方案（性能稍低，但兼容性广）；HTML 结构约束：.parent 必须是所有分组元素的共同最近祖先，否则 :has() 无法跨层级匹配；Class 命名规范：脚本依赖 group- 前缀识别分组；若使用 data-group=”5″ 等属性方案，需调整 JS 中的提取逻辑；性能与可维护性：该方案仅在页面加载时执行一次 DOM 查询与样式注入，后续交互 100% 由 CSS 引擎处理，零 JS 运行时开销，且新增分组无需修改任何代码。
✅ 总结
通过将 CSS 的声明式能力（:has()）与 JavaScript 的元编程能力（动态构建选择器）结合，我们以不到 20 行可复用代码，优雅解决了大规模分组悬停高亮问题。它既保持了纯 CSS 交互的高性能优势，又突破了静态样式表的表达局限，是现代 Web 开发中「渐进增强」实践的典型范例。
立即学习“前端免费学习笔记（深入）”；
评论(0)