Html 无法更改其他div的CSS

因此，我有一个三个链接的列表，分别将类名“active”按顺序添加到其中，这样当一个链接有它时，其他两个就没有了。当类“active”添加到每个链接时，每个链接都应该向div“box”添加不同的背景图像。但是，背景图像根本不显示

除了CSS代码中注释的背景图像问题外，所有功能都正常，如下所示： “无法在#框上的css下方执行”

请帮帮我，我真的需要这个：(

正文{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：100%；
高度：100vh；
显示器：flex；
}
#盒子{
宽度：100%；
高度：100vh；
}
身体ul{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：10；
列表样式：无；
}
身体健康{
颜色：红色；
文字装饰：无；
字体大小：50px；
过渡：颜色1000ms；
}
#一、主动{
颜色：黄色；
}
/*无法在#框上的css下方执行*/
#1.active~#盒{
背景：url（img1.jpg）rgba（0,0,0,0.6）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
背景混合模式：倍增；
过渡：所有500ms；
}
#二、主动{
颜色：黄色；
}
/*无法在#框上的css下方执行*/
#两个激活的~#盒{
背景：url（img2.jpg）rgba（0,0,0,0.6）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
背景混合模式：倍增；
过渡：所有500ms；
}
#三、主动{
颜色：黄色；
}
/*无法在#框上的css下方执行*/
#三个活跃的~#盒子{
背景：url（img3.jpg）rgba（0,0,0,0.6）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
背景混合模式：倍增；
过渡：所有500ms；
}

var i=0；
函数切换（）{
var-box=document.queryselectoral（“#一，#二，#三”）；
//将活动类添加到当前框中
框[i].classList.add（“活动”）；
//从上一个类中删除活动类
如果（i==0）{
box[box.length-1].classList.remove（“活动”）；
}否则{
框[i-1].classList.remove（“活动”）；
}
i++；
如果（i>=box.length）{
i=0；
}
}
切换（）；
设置间隔（切换，1800）；

一个快速解决方案是根据时间更改box类。 这意味着您应该添加css代码

#box.box1{..} ... 为了让它起作用

function toggle() {
        var boxes = document.querySelectorAll('#one,#two,#three')
        var box = document.getElementById('boxes')

        // add active class to the current box
        boxes[i].classList.add('active')

   //what you can add 
        if (boxes[i].id === 'one') {
          box.classList.add('box1')
          box.classList.remove('box2')
          box.classList.remove('box3')
        } else if (boxes[i].id === 'two') {
          box.classList.add('box2')
          box.classList.remove('box1')
          box.classList.remove('box3')
        } else {
          box.classList.add('box3')
          box.classList.remove('box1')
          box.classList.remove('box2')
        }

        // remove active class from the previous one
        if (i === 0) {
          boxes[boxes.length - 1].classList.remove('active')
        } else {
          boxes[i - 1].classList.remove('active')
        }

        i++

        if (i >= boxes.length) {
          i = 0
        }
      }

---

一个快速的解决方案是根据时间更改长方体类。 这意味着您应该添加css代码

#box.box1{..} ... 为了让它起作用

function toggle() {
        var boxes = document.querySelectorAll('#one,#two,#three')
        var box = document.getElementById('boxes')

        // add active class to the current box
        boxes[i].classList.add('active')

   //what you can add 
        if (boxes[i].id === 'one') {
          box.classList.add('box1')
          box.classList.remove('box2')
          box.classList.remove('box3')
        } else if (boxes[i].id === 'two') {
          box.classList.add('box2')
          box.classList.remove('box1')
          box.classList.remove('box3')
        } else {
          box.classList.add('box3')
          box.classList.remove('box1')
          box.classList.remove('box2')
        }

        // remove active class from the previous one
        if (i === 0) {
          boxes[boxes.length - 1].classList.remove('active')
        } else {
          boxes[i - 1].classList.remove('active')
        }

        i++

        if (i >= boxes.length) {
          i = 0
        }
      }

---

~selector适用于共享同一父元素的元素。

标记的父项是

，而

标记的父项是

---

为了实现问题中描述的目标，您应该在“活动”类上操作，该类直接与

关联，而不是让~selector stuff

选择器对共享同一父元素的元素起作用。

标记的父项是

，而

标记的父项是

---

为了实现问题中所述的目标，您应该操作与

直接相关的“活动”类，而不是使用~selector stuff

我需要更改

的背景，但要更改“活动”类正在添加到

标记中。因此我尝试了~combinator。但是，是的，关于不同的父对象，您是对的。我需要更改

的背景，但类“活动”正在添加到

标记中。因此，我尝试了~combinator。但是，是的，关于不同的父对象，您是对的。谢谢。效果很好。：D谢谢。效果很好。：D谢谢。效果很好。：D