如何在纯CSS中实现这种效果？

在纯CSS中，实现选择项颜色动态切换的效果通常依赖于伪类`:checked`，但CSS本身并不直接支持修改`<span>`标签的内容颜色。不过，你可以利用CSS组合一些技巧来模拟这种效果，例如使用`before`或`after`伪元素。以下是使用这种方法的一个例子：

首先，为每个单选按钮添加一个`data-checked`属性，表示它是否默认选中：

<label for="education">
  <input type="radio" id="education1" name="education" value="初中及以下" data-checked checked>
  <span class="custom-select">初中及以下<span class="highlight">（已选）</span></span>
</label>

然后，定义一个`.custom-select`类来包含你的文字和隐藏的伪元素，以及`.highlight`类来控制高亮颜色：

.custom-select {
  position: relative;
}

.highlight {
  visibility: hidden;
  transition: color 0.3s;
}

.custom-select:before {
  content: attr(data-checked) ? '（已选）' : '';
  position: absolute;
  top: -7px; /* 确保文字位置正确 */
  left: calc(50% - 15px); /* 根据文字长度调整 */
  color: red;
}

当单选按钮被选中时，我们可以通过JS修改`data-checked`属性，触发`:checked`伪类的变化，从而切换`.highlight`的可见性和颜色：

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      this.setAttribute('data-checked', 'true');
      this.previousElementSibling.querySelector('.highlight').classList.remove('hidden');
    } else {
      this.removeAttribute('data-checked');
      this.previousElementSibling.querySelector('.highlight').classList.add('hidden');
    }
  });
});

这个方案通过CSS的`before`伪元素实现了“已选”标志，而JavaScript负责控制其显示与否。注意，这个方法并非完美无缺，可能会因为浏览器兼容性或其他复杂情况而略有差异。