如何用SASS实现单选框选中后为相邻span元素应用样式？

嘿，我来帮你搞定这个问题！首先得说：你写的SASS语法本身是正确的，编译后会生成你需要的原生CSS代码，但没生效大概率是其他细节出了问题，下面给你拆解原因和解决办法：

1. 先确认HTML结构是否符合要求 #

相邻兄弟选择器+只能选中紧接在目标元素后的第一个兄弟元素，所以你的HTML必须是这种直接相邻的结构：

<input type="radio" name="option" id="opt1">
<span>选项1</span>

如果input和span之间插入了其他标签（比如<label>、<div>），哪怕是换行之外的元素，选择器都不会生效。比如下面这种结构就不符合要求：

<input type="radio" name="option" id="opt1">
<label for="opt1"></label>
<span>选项1</span>

2. 两种可靠的SASS写法 #

如果HTML结构没问题，你可以试试这两种写法，确保编译后的CSS完全符合预期：

写法一：嵌套式写法（优化可读性） #

你的原始写法调整下缩进和空格，就能保证编译正确：

input[type='radio'] {
  &:checked {
    + span {
      color: #ff4444;
      font-weight: bold;
    }
  }
}

编译后生成的CSS就是你需要的：

input[type='radio']:checked + span {
  color: #ff4444;
  font-weight: bold;
}

写法二：扁平化写法（更直观） #

如果你担心嵌套带来的混淆，也可以直接用和原生CSS几乎一致的写法，SASS完全支持这种扁平化的选择器：

input[type='radio']:checked + span {
  color: #ff4444;
  font-weight: bold;
}

3. 排查样式优先级冲突 #

如果span已经有其他样式覆盖了当前设置，你可以通过增加选择器优先级来解决，比如给元素加类名：

.form-radio {
  &:checked + .radio-label {
    color: #ff4444;
  }
}

对应的HTML结构：

<input type="radio" name="option" class="form-radio" id="opt1">
<span class="radio-label">选项1</span>

4. 验证SASS编译结果 #

如果以上都没问题，你可以把SASS代码放到在线编译工具里检查，看看编译后的CSS是不是你预期的结果——如果编译结果不对，可能是你的SASS版本或编译配置出了问题。

总结下来，核心就是确保input和span是直接相邻的兄弟元素，再配合正确的选择器写法，就能实现你要的效果啦！

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