如何从.first类子元素定位所有.dSec类父元素并修改背景色？

原代码无法实现需求的核心原因：

• CSS中的~兄弟选择器只能作用于同一层级的元素，而.first.active是.dFirdiv的子元素，和.dSecdiv并非同级，所以选择器无法匹配到目标元素。
• JS仅给li元素添加/移除active类，但由于CSS选择器逻辑错误，样式根本无法生效。

方法一：纯JavaScript直接修改样式 #

直接在点击事件中获取所有.dSec元素，修改它们的背景色，无需依赖CSS选择器：

const firstLi = document.querySelector(".first");
firstLi.addEventListener("click", () => {
  const dSecElements = document.querySelectorAll(".dSec");
  dSecElements.forEach(el => {
    // 切换背景色：当前为黑色则恢复默认，否则设为黑色
    el.style.backgroundColor = el.style.backgroundColor === "rgb(0, 0, 0)" ? "" : "#000";
  });
});

方法二：调整CSS选择器+修改JS逻辑 #

给.first的父元素.dFir添加active类，利用父元素的同级关系控制.dSec：

修改后的CSS #

/* 通过父元素的active类，选择同级的所有.dSec */
.dFir.active ~ .dSec {
  background-color: #000;
}

修改后的JS #

const firstLi = document.querySelector(".first");
firstLi.addEventListener("click", () => {
  // 给父元素.dFir切换active类
  firstLi.parentElement.classList.toggle("active");
});

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