为什么 radio:checked 改变 div 的颜色不起作用？

Question

所以我有一个圆形 div，一旦检查了链接到它们的无线电就应该有黑色背景（这是一个自动循环 javascript 的旋转木马）。但是由于某种原因，它对我不起作用。我试过手动将背景更改为黑色，看起来不错。请帮助:(

这是css

#radio1:checked ~ .navigation-auto .auto-btn1{
    background: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background: black;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
    background: black;
}

对于 html 它由于其他原因在中间被切断，但这很重要

           <div class="slides">
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <input type="radio" name="radio-btn" id="radio5">
          .....rest of code

和

        <div class="navigation-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
                <div class="auto-btn4"></div>
                <div class="auto-btn5"></div>
        </div>

我不确定这些信息是否足够，但如果您需要更多信息，请告诉我。同样，当我手动更改 div 时，它确实改变了颜色，但是 #radio:checked 功能似乎对我不起作用。

这是javascript

var counter = 1;
setInterval(function(){
    document.getElementById('radio' + counter).checked = true;
    counter++;
    if(counter >5){
        counter =1;
    }
}, 5000);

Answer 1

您的方法将行不通，因为您使用的是兄弟选择器，要使该方法行得通，您需要将 div 放在容器内的每个无线电之后，以避免影响其他元素。

像这样：

input[type="radio"]:checked ~ div {
  color: red;
}

<div>
    <input type="radio" />
    <div>content</div>
</div>

<div>
    <input type="radio" />

    <p>paragraph</p>
    <div>content</div>
</div>

实例：https://codesandbox.io/s/wizardly-bhaskara-nln6gr?file=/src/styles.css:36-89

Answer 2

单选按钮必须在 .navigation-auto 元素之上并且具有相同的父元素：

#radio1:checked ~ .navigation-auto .auto-btn1{
    background: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background: black;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
    background: black;
}



.navigation-auto > div
{
  width: 1em;
  height: 1em;
  display: inline-block;
  border: 1px solid red;
}

           <div class="slides">
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <input type="radio" name="radio-btn" id="radio5">

                <div class="navigation-auto">
                        <div class="auto-btn1"></div>
                        <div class="auto-btn2"></div>
                        <div class="auto-btn3"></div>
                        <div class="auto-btn4"></div>
                        <div class="auto-btn5"></div>
                </div>
           </div>

如果这不是一个选项，您将需要为此使用 javascript：

for(let i = 0, nav = document.querySelector(".navigation-auto"), slides = document.querySelectorAll('.slides > input[name="radio-btn"]'); i < slides.length; i++)
{
  slides[i].addEventListener("click", e =>
  {
    for(let n = 0; n < nav.children.length; n++)
    {
      nav.children[n].classList.toggle("checked", n == i);
    }
  });
}

.navigation-auto > div.checked
{
  background-color: black;
}
.navigation-auto > div
{
  width: 1em;
  height: 1em;
  display: inline-block;
  border: 1px solid red;
}

      <div class="navigation-auto">
              <div class="auto-btn1"></div>
              <div class="auto-btn2"></div>
              <div class="auto-btn3"></div>
              <div class="auto-btn4"></div>
              <div class="auto-btn5"></div>
      </div>
           <div class="slides">
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <input type="radio" name="radio-btn" id="radio5">
           </div>

为什么 radio:checked 改变 div 的颜色不起作用？

Why is radio:checked to change color of a div not working?

css

background

radio-button

checked