为什么复选框选中状态无法影响后续div内的span元素样式？

问题原因 #

CSS 中的~是后续兄弟选择器，仅能匹配与当前元素同层级、且在当前元素之后出现的元素。你的span被div包裹，属于div的子元素，和.check类的复选框不是同级元素，所以原来的选择器规则无法命中span，样式不会生效。

修复方案 #

修改CSS的选择器规则，先选中.check后续的同级div，再选中div内部的对应span即可，调整后的代码如下：

:root {
  --main-color: red;
  --secondary-color: blue;
  --dark-color: #444;
  --light-color: #fafafa;
}

body {
  font-family: 'Montserrat', sans-serif;
  text-align: justify;
  margin: 0px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

input {
  box-sizing: border-box;
}

.toggle {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

span {
  height: 20px;
  width: 100px;
  display: grid;
  place-items: center;
  background-color: blue;
  margin: 5px 0;
  transition: 400ms; /* 把transition提出来，未选中状态也会有过渡效果 */
}

.check:checked ~ div span {
  background: red;
}

.check:checked ~ div .span-one {
  position: relative;
  top: 25px;
  transform: rotate(45deg);
}

.check:checked ~ div .span-two {
  position: relative;
  opacity: 0;
}

.check:checked ~ div .span-three {
  position: relative;
  bottom: 25px;
  transform: rotate(-45deg);
}

优化建议 #

如果担心页面内其他div被误匹配，可以给包裹span的div添加专属类名，示例如下：

<input class="check" type="checkbox">
<div class="toggle-wrapper">
  <span class="span-one"></span>
  <span class="span-two"></span>
  <span class="span-three"></span>
</div>

之后把CSS选择器中的div替换为.toggle-wrapper即可，规则更精准。

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