CSS选择器问题：复选框选中时如何修改同级SVG图标颜色

嘿，这个问题我之前也碰到过！核心原因是你HTML里的元素顺序——你的<input>在<svg>后面，而CSS目前没有「反向兄弟选择器」来选中前面的元素，所以常规的选择器没法生效。给你两个靠谱的解决办法，不用JS就能搞定：

• 方法一：调整HTML结构（兼容性最好）
  把<input>移到<svg>前面，这样就能用相邻兄弟选择器+来选中后面的图标了：

  <label class="checkbox">
    <input
      type="checkbox"
      name="checkbox"
      id="checkbox"
      class="checkbox__input"
      checked
    >
    <svg class="checkbox__icon icon icon--checkbox">
      <use xlink:href="public/images/icons/sprite.svg#icon-checkbox-icon"></use>
    </svg>
  </label>
  

  对应的SCSS代码：

  .checkbox__input:checked + .checkbox__icon {
    color: #2ecc71; /* 换成你想要的颜色 */
  }
  

  这个方法对所有现代浏览器甚至旧浏览器都友好，是最稳妥的方案。

• 方法二：用CSS :has 伪类（不用改结构，但需要浏览器支持）
  如果你不想动HTML结构，可以用CSS的:has伪类——它能让父元素根据子元素的状态来设置样式。因为<input>和<svg>都在<label>里，所以可以这么写：

  .checkbox:has(.checkbox__input:checked) .checkbox__icon {
    color: #2ecc71; /* 换成你想要的颜色 */
  }
  

  注意：:has是比较新的CSS特性，Chrome 101+、Firefox 121+、Safari 15.4+都支持，如果你不需要兼容特别老的浏览器，这个方法很方便。

你已经把SVG的fill设为currentColor了，这一步完全正确，只要上面的选择器生效，颜色肯定能改过来～

备注：内容来源于stack exchange，提问作者Denis