当另一个元素具有 .active class 时，如何修改一个元素？

Question

.list-nav 元素有.active 类时，如何选择.field-wrapper 元素？ 目标是 .field-wrapper z-index = -1 仅适用于 CSS。

<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>

Chat GPT 提出了两个解决方案，但都不行

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

和

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