本文介绍如何用纯 CSS 的 :has() 伪类配合 JavaScript 动态生成选择器，高效实现数百个分组内所有同组元素的统一悬停高亮，避免重复书写 300+ 条 CSS 规则。
本文介绍如何用纯 css 的 `:has()` 伪类配合 javascript 动态生成选择器，高效实现数百个分组内所有同组元素的统一悬停高亮，避免重复书写 300+ 条 css 规则。
在现代前端开发中，我们常需实现“悬停任一子项，高亮整个逻辑分组”的交互效果。例如：页面包含 300 组、每组 3 行
元素，分别标记为 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（
- HTML 结构约束：.parent 必须是所有分组元素的共同最近祖先，否则 :has() 无法跨层级匹配；
- Class 命名规范：脚本依赖 group- 前缀识别分组；若使用 data-group="5" 等属性方案，需调整 JS 中的提取逻辑；
- 性能与可维护性：该方案仅在页面加载时执行一次 DOM 查询与样式注入，后续交互 100% 由 CSS 引擎处理，零 JS 运行时开销，且新增分组无需修改任何代码。
✅ 总结
通过将 CSS 的声明式能力（:has()）与 JavaScript 的元编程能力（动态构建选择器）结合，我们以不到 20 行可复用代码，优雅解决了大规模分组悬停高亮问题。它既保持了纯 CSS 交互的高性能优势，又突破了静态样式表的表达局限，是现代 Web 开发中「渐进增强」实践的典型范例。
立即学习“前端免费学习笔记（深入）”；
