如何在.nav-list拥有.active类时，用CSS设置.field-wrapper的z-index为-1

需求说明 #

当.nav-list元素带有.active类时，仅通过CSS选中.field-wrapper元素并将其z-index设置为-1。

给定HTML结构 #

<nav class="nav">
    <a href=""></a>
    <ul class="nav-list"></ul>
    <img src="" alt="">
</nav>

<div class="main">
    <div class="wrapper">
        <div class="field-section">
            <div class="field-wrapper"></div>
        </div>
    </div>
</div>

无效方案分析 #

ChatGPT给出的两个方案均无法生效，原因如下：

• 方案一：nav .nav-list.active + .main .field-wrapper
  相邻兄弟选择器+只能匹配同一父级下紧跟的元素，.nav-list.active的相邻元素是<img>，而.main是nav的兄弟元素，该选择器的层级逻辑完全错误，无法命中目标。
• 方案二：.nav-list.active ~ .field-wrapper
  通用兄弟选择器~同样只能匹配同一父级下的后续元素，.nav-list和.field-wrapper分属nav和main两个不同的父容器，属于不同DOM分支，兄弟选择器无法跨父级匹配。

可行解决方案 #

纯CSS方案（现代浏览器支持）

利用CSS :has()伪类，让nav元素检测内部是否存在.nav-list.active，再选中相邻的.main下的.field-wrapper：

nav:has(.nav-list.active) + .main .field-wrapper {
    z-index: -1;
}

:has()伪类支持情况：Chrome 101+、Firefox 121+、Safari 15.4+，若需兼容旧浏览器，需采用以下方案。

兼容旧浏览器方案（需调整逻辑）

如果必须支持不兼容:has()的浏览器，可通过以下两种方式实现：

1. 调整HTML逻辑：将.active类直接添加到nav元素上，而非.nav-list，此时可直接用相邻兄弟选择器：

   nav.active + .main .field-wrapper {
       z-index: -1;
   }
   

2. 配合JavaScript动态控制：监听.nav-list的类变化，给.main添加/移除标记类，再通过CSS控制：

   const navList = document.querySelector('.nav-list');
   const main = document.querySelector('.main');
   
   // 监听类变化的观察者
   const observer = new MutationObserver(() => {
       main.classList.toggle('nav-list-active', navList.classList.contains('active'));
   });
   observer.observe(navList, { attributes: true, attributeFilter: ['class'] });
   

   对应的CSS：

   .main.nav-list-active .field-wrapper {
       z-index: -1;
   }
   

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