点击某父div内的checkbox如何控制不同父div下的所有img元素旋转

CSS 的兄弟选择器 ~ 仅支持匹配同一父元素下、位于当前元素之后的同级节点，无法跨父元素选择其他容器内的节点，也无法向上遍历DOM层级，这就是你原有写法只能控制同div下图片的原因。

以下是两种可直接落地的实现方案： #

方案1：纯CSS实现（需微调HTML结构） #

把checkbox移到所有 .img-wrapper 的前面，和所有图片容器同级，就可以用兄弟选择器匹配到所有后续容器内的图片：

调整后HTML代码 #

<input class="checkbox" type="checkbox" id="rotate">
<label class="label-checkbox" for="rotate">Rotate</label>

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

<div class="img-wrapper">
  <img class="img" src="https://via.placeholder.com/300" />
</div>

对应SCSS代码 #

.checkbox:checked {
  ~ .img-wrapper .img {
    transform: rotate(180deg);
  }
}

如果需要保留label在原有的视觉位置，用CSS定位调整label的位置即可，不会影响选择逻辑。 #

方案2：无需改动HTML结构，用少量JS实现 #

如果不想调整HTML的层级结构，加几行JS监听checkbox的选中状态，给公共父级加个标记类即可：

JS代码 #

const rotateCheckbox = document.getElementById('rotate');
// 这里可以替换成你自己包裹所有元素的外层容器，不一定要用body
const parentContainer = document.body;

rotateCheckbox.addEventListener('change', () => {
  parentContainer.classList.toggle('rotate-all-img', rotateCheckbox.checked);
})

对应SCSS代码 #

.rotate-all-img .img {
  transform: rotate(180deg);
}

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