本文详解如何使用 css :has() 伪类实现基于前序兄弟元素内部状态（如 .cell.open）来样式化后续兄弟元素，解决传统 css 无法向上或跨层级查询的限制，并提供兼容性方案与实战示例。
本文详解如何使用 css :has() 伪类实现基于前序兄弟元素内部状态（如 .cell.open）来样式化后续兄弟元素，解决传统 css 无法向上或跨层级查询的限制，并提供兼容性方案与实战示例。
在标准 CSS 选择器中，不存在“前序兄弟选择器”（如 prev + current 的反向形式），也无法直接根据某个元素 之前 兄弟的子元素状态来定位当前元素。但现代 CSS 提供了强大的 :has() 伪类，使这类“父级条件判断”成为可能——它允许我们基于元素后代、子元素或兄弟元素的存在/状态来选择该元素本身。
回到原始需求：给所有位于 .header .cell.open 之后的 .header .cell 元素添加黄色背景（即 Header 2 和 Header 3）。关键在于：目标元素（.header .cell）本身不是 .cell.open 的兄弟，而是其后续同级 .header 容器内的子元素。因此需分两步逻辑表达：
- 找到已包含 .cell.open 的 .header 元素（记为触发源）；
- 选中该触发源之后所有同级 .header 元素内的 .cell。
这正是 :has() 的典型用例：
/* ✅ 正确：匹配「有 .cell.open 子元素」的 .header 之后的所有 .header .cell */
.header:has(.cell.open) ~ .header .cell {
background-color: yellow;
}该规则含义是：
→ 先定位任意一个 .header，只要其内部存在 .cell.open；
→ 再选取该 .header 后续所有兄弟中的 .header 元素；
→ 最后选取这些后续 .header 中的全部 .cell 子元素。
? 注意：~ 是通用兄弟选择器（general sibling combinator），匹配同一父级下、位于指定元素之后的所有兄弟元素，不局限于紧邻。
立即学习“前端免费学习笔记（深入）”；
实际效果验证
对于如下 HTML 结构：
<div class="table">
<div class="row header">
<div class="cell open">Header 1</div>
</div>
<div class="row">Content 1</div>
<div class="row">Content 2</div>
<div class="row header">
<div class="cell open">Header 2 (This should be yellow)</div>
</div>
<div class="row">Content 3</div>
<div class="row header">
<div class="cell open">Header 3 (This should be yellow)</div>
</div>
<div class="row">Content 4</div>
</div>- 第一个 .header:has(.cell.open) 是 Header 1 所在容器；
- ~ .header .cell 将命中 Header 2 和 Header 3 对应的 .cell —— 完美符合预期。
进阶场景：仅高亮“首个 open 之后的 close/other 元素”
若需求变为「仅当某 .header 前面存在 .cell.open，且自身不含 .open（如 .cell.close）时才高亮」，纯 CSS 仍可实现（需结合 :not()）：
/* 匹配：前面有 .header:has(.cell.open)，且当前 .cell 不是 .open */
.header:has(.cell.open) ~ .header .cell:not(.open) {
background-color: lightcoral;
}此写法适用于第二个示例中仅高亮 Header 2（.cell.close）的场景——但需注意：它依赖于 .cell.close 是显式存在的 class，而非默认状态。
⚠️ 兼容性与降级建议
- :has() 已被 Chrome 105+、Edge 105+、Safari 15.4+ 原生支持；
- Firefox 当前（v128）尚未支持（caniuse.com/css-has），生产环境需谨慎使用；
- 若需全浏览器兼容，推荐 JavaScript 辅助：
document.querySelectorAll('.header:has(.cell.open)').forEach(trigger => { [...trigger.nextElementSibling?.closest('.header')?.querySelectorAll('.cell') || []] .forEach(cell => cell.style.backgroundColor = 'yellow'); });或更健壮地遍历所有 .header 并检查前置 .header 是否含 .cell.open。
总结
:has() 彻底改变了 CSS 的条件选择能力，让“基于后代状态选择祖先/兄弟”从不可能变为一行声明。虽然兼容性仍在完善中，但它代表了 CSS 未来的关键演进方向。在支持环境中，优先使用 :has() 实现语义清晰、无 JS 依赖的动态样式逻辑；在不支持环境，则采用渐进增强策略，以 JS 作为优雅降级方案。
