如何根据一个 :checked 值设置 2 个不同元素的样式？答案

【问题标题】：How do I style 2 different elements based on one :checked value?如何根据一个 :checked 值设置 2 个不同元素的样式？
【发布时间】：2017-07-28 03:08:28
【问题描述】：

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

每个新样式的“选择”都包含 2 个跨度，以便编号显示在彩色框中，文本显示在白色框中。当单击“选择”时，我拥有它，以便彩色编号框按应有的方式更改，但无法弄清楚如何同时更改第二个跨度的边框颜色。

你可以在这里明白我的意思：https://jsfiddle.net/2cs9n7yo/

本质上，我希望能够在 .left-col 和 .right-col 中更改颜色属性的值—— .left-col 工作正常，但我不确定如何为 .right- col 以及当我尝试以相同的方式进行设置时，它无法正常工作。有没有办法根据 :checked 更改 2 个不同元素内的属性？

 /*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;
}

谢谢！

【问题讨论】：

没看代码，元素是checkbox之后的下一个兄弟吗？

标签： html css

【解决方案1】：

+ 是一个adjacent sibling selector。您需要将~ 选择器与.right-col 一起使用，因为它与选中的输入不相邻。 ~ 是一个 general sibling selector 并且会选择 :checked 元素之后的任何 .right-col。

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

https://jsfiddle.net/2cs9n7yo/1/

【讨论】：

非常感谢您不仅如此迅速地提供解决方案，而且还花时间提供解释。我不知道 + 仅用于相邻，而 ~ 用于兄弟姐妹，所以这非常有帮助。谢谢！！
@Mark 不客气。如果你想保持一致，你也可以对它们都使用~。