如何在popup-wrapper添加is-active类时联动设置相邻content元素的样式

好问题！这种场景确实很常见——当弹窗激活时想同步控制内容区样式，但又不想给每个内容区都重复加状态绑定，毕竟多实例维护起来太麻烦。下面分两种方案给你，优先CSS实现，不行再用Angular/JS方案：

一、优先：纯CSS实现（依赖DOM结构关系） #

CSS选择器是基于DOM层级关系工作的，只要你的.popup-wrapper和.content有明确的结构关联，就能直接实现需求。

情况1：.content在.popup-wrapper前面（你的示例结构） #

现代浏览器支持的:has()选择器可以帮你实现反向选中（选中前面的内容区）：

/* 当.content的下一个兄弟元素是active状态的弹窗时，给.content设置样式 */
.content:has(+ .popup-wrapper.is-active) {
  opacity: 0.6;
  pointer-events: none; /* 可选，禁止内容区交互 */
  background-color: #f0f0f0;
}

注意：:has()选择器目前在Chrome、Firefox 121+、Safari等现代浏览器都支持，如果你的项目需要兼容旧版浏览器，可能得用JS方案。

情况2：.popup-wrapper在.content后面 #

如果DOM结构是弹窗在前、内容区在后，用通用兄弟选择器更简单：

/* 当active状态的弹窗后面有.content时，给.content设置样式 */
.popup-wrapper.is-active ~ .content {
  opacity: 0.6;
  pointer-events: none;
}

情况3：两者在同一个父容器下（无论顺序） #

如果.content和.popup-wrapper都在同一个父容器里，比如：

<div class="container">
  <div class="content">...</div>
  <div class="popup-wrapper">...</div>
</div>

可以结合父容器和:has()实现，确保只影响当前弹窗对应的内容区（避免多实例互相干扰）：

.container:has(.popup-wrapper.is-active) .content {
  opacity: 0.6;
  pointer-events: none;
}

二、Angular/JS方案（兼容旧浏览器或复杂DOM结构） #

如果CSS方案因为DOM结构或兼容性问题无法实现，那可以用Angular结合MutationObserver统一监听所有弹窗的状态变化，自动同步内容区样式，不需要给每个.content加重复的ngClass。

实现步骤： #

1. 给所有.popup-wrapper添加模板引用变量，方便Angular获取元素：

<!-- 每个弹窗实例都加#popupWrapper -->
<div class="content">Some content</div>
<button (click)="popup1 = !popup1">Open Popup 1</button>
<div #popupWrapper class="popup-wrapper" [ngClass]="popup1 ? 'is-active' : ''">Popup 1 Content</div>

<div class="content">Another content</div>
<button (click)="popup2 = !popup2">Open Popup 2</button>
<div #popupWrapper class="popup-wrapper" [ngClass]="popup2 ? 'is-active' : ''">Popup 2 Content</div>

2. 在组件中用ViewChildren获取所有弹窗元素，并用MutationObserver监听类变化：

import { AfterViewInit, Component, ElementRef, QueryList, ViewChildren } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: './your-component.component.css'
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('popupWrapper') popupWrappers!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    this.popupWrappers.forEach(wrapperEl => {
      const wrapper = wrapperEl.nativeElement;
      // 创建观察者，监听类属性变化
      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            const isActive = wrapper.classList.contains('is-active');
            // 找到当前弹窗对应的.content（这里假设同一父容器下的第一个.content，可根据实际结构调整）
            const content = wrapper.parentElement?.querySelector('.content');
            if (content) {
              isActive 
                ? content.classList.add('content-blurred') 
                : content.classList.remove('content-blurred');
            }
          }
        });
      });

      // 开始监听当前弹窗元素的类变化
      observer.observe(wrapper, { attributes: true });
    });
  }
}

3. 在CSS中定义内容区的样式：

.content-blurred {
  opacity: 0.6;
  pointer-events: none;
  filter: blur(2px); /* 可选，添加模糊效果 */
}

这种方案只需要写一次逻辑，就能自动处理所有弹窗实例，完美解决多场景维护麻烦的问题。

内容的提问来源于stack exchange，提问作者Denver Dang