Html 如何基于一个：选中值设置两个不同元素的样式？

我有一套为我正在创建的测验定制的单选按钮。“正常”状态显示良好，但我遇到的问题是更改“选中”状态的样式（颜色）

每个新样式的“选项”包含2个跨度，以便编号显示在彩色框中，文本显示在白色框中。当点击一个“选项”时，我有了它，这样彩色的编号框就会像它应该做的那样改变，但我不知道如何同时改变第二个跨度的边框颜色

你完全可以理解我在这里的意思：

基本上，我希望能够在.left col和.right col中更改颜色属性的值--.left col工作正常，但我不确定如何为.right col执行此操作，以及当我尝试以相同的方式设置它时，它无法正常工作。是否有一种方法可以基于：checked更改两个不同元素中的属性

 /*This part works*/
 .container input:checked + .left-col{
     background:#a20067;
     border:2px solid #a20067;
 }

/*This doesn't do anything*/
.container input:checked + .right-col{
   border:2px solid #a20067;
}

谢谢

+

是一个。您需要将

~

选择器与

.right col

一起使用，因为它与选中的输入不相邻

~

是一个，将选择

：checked

元素后面的任何

。右列

.container input:checked ~ .right-col{
   border:2px solid #a20067;
}

没有查看代码，元素是复选框后的下一个同级元素吗？非常感谢您不仅如此快速地提供了解决方案，而且还花时间提供了解释。我不知道+只用于相邻的，~用于兄弟姐妹，所以这非常有用。谢谢@马克，不客气。如果您想保持一致，您也可以对这两种代码使用
~
。