如何使用SASS在radio类型input选中时设置label内img样式

• 核心利用CSS原生:checked伪类匹配选中状态的单选框，SASS是编译时生成CSS的预处理器，没有运行时检测DOM状态的能力，不需要写特殊逻辑判断，只需要按嵌套规则写选择器即可。
• 针对你给出的DOM结构，有两种实现方案：现代浏览器可直接用:has()伪类适配现有结构；需要兼容老旧浏览器可微调DOM位置，用兄弟选择器实现全兼容。

2024年起:has()伪类全球兼容性覆盖95%以上，可直接适配你当前的HTML结构，不需要改DOM，SASS代码如下：

// 写法1：从父容器层级开始写，逻辑最直观
.input__wrapper {
  // 检测容器内部的radio是否被选中
  &:has(.radioGroup__imageItem__input:checked) {
    .radioGroup__imageItem__label .radioGroup__imageItem__label__image {
      // 此处写选中后给img应用的样式，示例：
      border: 2px solid #f53f3f;
      transform: scale(1.05);
      border-radius: 4px;
    }
  }
}

// 写法2：从input选择器出发嵌套，用@at-root跳出嵌套层级
/*
.radioGroup__imageItem__input {
  &:checked {
    @at-root .input__wrapper:has(&) {
      .radioGroup__imageItem__label__image {
        border: 2px solid #f53f3f;
        transform: scale(1.05);
      }
    }
  }
}
*/

如果需要兼容不支持:has()的老旧浏览器，只需要把radio节点从.input__unit__wrapper中移出，放到label标签的前一个相邻位置（保留原id和for属性的绑定关系，功能完全不受影响），调整后的DOM参考：

<div class="input__wrapper default__label__down">
  <div class="input__unit__wrapper">
    <span class="input__unit">mm</span>
  </div>
  <!-- radio移到label紧邻的前侧位置 -->
  <input name="fabricColor" id="allegro_red_1" class="radioGroup__imageItem__input" type="radio" value="allegro_red_1">
  <label class="radioGroup__imageItem__label" for="allegro_red_1">
      <img alt="allegro_red_1" src="IMG SRC" class="radioGroup__imageItem__label__image">
  </label>
</div>

对应的SASS代码用相邻兄弟选择器+即可，不需要:has()，兼容性拉满：

.radioGroup__imageItem__input {
  // 可自定义radio默认样式，通常视觉上会隐藏原生radio
  &:checked {
    // 匹配紧邻在radio后的label元素，选中内部img
    + .radioGroup__imageItem__label {
      .radioGroup__imageItem__label__image {
        // 此处写选中后给img应用的样式
        border: 2px solid #f53f3f;
        transform: scale(1.05);
        border-radius: 4px;
      }
    }
  }
}

• 同组单选框必须保持name属性值一致，你当前代码已设置name="fabricColor"，可以保证单选互斥逻辑正常。
• 如果需要自定义radio的视觉样式，通常会设置原生input的opacity: 0、position: absolute等属性隐藏原生控件，不影响选中功能。

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