为何Radio Input的:checked状态无法改变其他Div/Label样式？

问题原因 #

你当前的CSS选择器逻辑错误：

• ~ 是通用兄弟选择器，只能选中目标元素的同级且位于其后方的元素，但 .bg-button1 是 .navbg 的子元素，并非 #slide1 的直接同级，所以原选择器 #slide1:checked~.bg-button1 无法匹配到目标div。
• label元素在 .nav-btn 容器内，同样不属于 #slide1 的直接同级，原选择器也无法生效。

修正后的代码 #

CSS部分

body {
  background: #333;
}

.index-btn,
.navbg div {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid red;
  cursor: pointer;
  background-color: transparent; /* 初始透明背景 */
}

.parent {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn,
.navbg {
  display: flex;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  top: 30px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  gap: 20px;
}

/* 选中slide1时，修改对应bg div和label的样式 */
#slide1:checked ~ .navbg .bg-button1,
#slide1:checked ~ .nav-btn [for="slide1"] {
  background-color: purple; /* 替换为你要的紫色 */
  box-shadow: 0px 0px 20px yellow;
}

/* 为其他radio添加相同逻辑 */
#slide2:checked ~ .navbg .bg-button2,
#slide2:checked ~ .nav-btn [for="slide2"] {
  background-color: purple;
  box-shadow: 0px 0px 20px yellow;
}

#slide3:checked ~ .navbg .bg-button3,
#slide3:checked ~ .nav-btn [for="slide3"] {
  background-color: purple;
  box-shadow: 0px 0px 20px yellow;
}

#slide4:checked ~ .navbg .bg-button4,
#slide4:checked ~ .nav-btn [for="slide4"] {
  background-color: purple;
  box-shadow: 0px 0px 20px yellow;
}

#slide5:checked ~ .navbg .bg-button5,
#slide5:checked ~ .nav-btn [for="slide5"] {
  background-color: purple;
  box-shadow: 0px 0px 20px yellow;
}

HTML部分（无需修改结构）

<div class="parent">
  <input type="radio" name="btn-index" id="slide1">
  <input type="radio" name="btn-index" id="slide2">
  <input type="radio" name="btn-index" id="slide3">
  <input type="radio" name="btn-index" id="slide4">
  <input type="radio" name="btn-index" id="slide5">
  <div class="navbg">
    <div class="bg-button1"></div>
    <div class="bg-button2"></div>
    <div class="bg-button3"></div>
    <div class="bg-button4"></div>
    <div class="bg-button5"></div>
  </div>
  <div class="nav-btn">
    <label for="slide1" class="index-btn"></label>
    <label for="slide2" class="index-btn"></label>
    <label for="slide3" class="index-btn"></label>
    <label for="slide4" class="index-btn"></label>
    <label for="slide5" class="index-btn"></label>
  </div>
</div>

说明 #

• 修正后的选择器通过 ~ 选中radio后方的同级容器（.navbg 和 .nav-btn），再通过后代选择器定位到对应子元素，实现选中radio时同步样式。
• 给所有radio都添加了对应的样式规则，确保每个选项选中时都能触发对应元素的样式变化。

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