如何从一个父元素的子元素定位到另一个父元素？

Question

假设我有四个 div 类如下：

dFir
dSec
dSec
dThi

在这个 div 中，我有一个

li

并有以下课程：

first
sec
sec
thi

我必须从

first

类定位到所有

dSec

类，并将

background-color

更改为

#000

。

我写的HTML如下”

<div class="dFir">
  <li class="first">fir</li>
</div>

<div class="dSec">
  <li class="sec">sec</li>
</div>

<div class="dSec">
  <li class="sec">thi</li>
</div>

<div class="dThi">
  <li class="thi">fou</li>
</div>

我写的css如下：

.first.active ~ .dSec{
   background-color: #000;
}

我写的js如下：

const free = document.querySelectorAll(".first");

    free.forEach(uff => {
        uff.addEventListener("click", () => {
            uff.classList.toggle("active");
        });
    });

我必须从

first

类定位到所有

dSec

类，并将

background-color

更改为

#000

。

const free = document.querySelectorAll(".first");

free.forEach(uff => {
  uff.addEventListener("click", () => {
    uff.classList.toggle("active");
  });
});

.first.active~.dSec {
  background-color: #000;
}

<div class="dFir">
  <li class="first">fir</li>
</div>

<div class="dSec">
  <li class="sec">sec</li>
</div>

<div class="dSec">
  <li class="sec">thi</li>
</div>

<div class="dThi">
  <li class="thi">fou</li>
</div>

Answer 1

我想你可以通过 CSS 来做到这一点：

const free = document.querySelectorAll(".first");

free.forEach(uff => {
  uff.addEventListener("click", () => {
    uff.classList.toggle("active");
  });
});

.dFir:has(> .first.active) ~ .dSec {
  background-color: #000;
}

<div class="dFir">
  <li class="first">fir</li>
</div>

<div class="dSec">
  <li class="sec">sec</li>
</div>

<div class="dSec">
  <li class="sec">thi</li>
</div>

<div class="dThi">
  <li class="thi">fou</li>
</div>

W3C 的选择器级别 4 工作草案包括一个 :has() 伪类，它提供了此功能以及其他功能，然后，您可以针对同级。