Html 在保持输入的同时更改广播文本（&A）；标签中的跨距

我正在制作一个单选过滤器列表，这样当选择单选按钮时，它看起来就像一个复选标记。我遇到的问题是，我无法更改单选按钮旁边的跨距文本的颜色

我在stackoverflow上搜索了这里，并尝试使用以下建议的代码：

input[type="radio"]:checked + .label-text {
     color: blue;
}

但这仍然不会改变文本。我试着将单选按钮移到标签外，但随后复选标记的功能停止工作。 像这样试试看

input[type="radio"]:checked + i+ .label-text {

。主体{
填充：1em；
背景色：#F5；
颜色：#22222；
字体系列：Lato、Helvetica、Arial、无衬线字体；
}
.过滤器h5{
字体系列：“Roboto压缩”，“Arial压缩”，无衬线；
文本转换：大写；
颜色：#22222；
字体大小：粗体；
保证金：1雷姆0；
}
.i{
左边距：-1em；
字号：1rem；
}
输入[type=“radio”]：选中+i+。标签文本{
颜色：#7a4b83；
字体大小：粗体；
}
标签>输入{
可见性：隐藏；
}
标签{
显示：块；
线高：1.2rem；
}
输入+i{
可见性：隐藏；
颜色：#7a4b83；
右边距：0.2米；
}
输入：选中+i{
能见度：可见；
}

第一组
标签1a
标签1b
标签1c
标签1d
第2组
标签2a
标签2b
标签2c
标签2d
第3组
标签3a
标签3b
标签3c
标签3d
第4组
标签4a
标签4b
标签4c
标签4d

试试这个css

input[type="radio"]:checked ~ .label-text {
  color: blue;

}

+

选择器用于直接选择以下同级元素：，

~

选择器用于选择前面选择器之后的任何同级元素

由于无线电元件和跨度之间有一个元件（

），因此加号选择器无法匹配跨度元件

<label>
    <input type="radio" name="radioGroup1" />
    <i class="fa fa-check"></i>
    <span class="label-text">Label 1a</span>
</label>

标签1a

谢谢！我使用了你的代码，效果很好。我从来不知道~selector。谢谢，您的代码也很有效，但我使用了其他用户的代码。