Question

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

每个新风格的选择＆＃39;包含2个span，允许编号显示在彩色框中，文本显示在白色框中。当选择＆＃39;单击，我有它，以便彩色编号框改变它应该，但不能弄清楚如何同时更改第二个跨度的边框颜色。

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

基本上我希望能够在.left-col和.right-col中更改颜色属性的值 - .left-col工作正常，但我不知道如何做到这一点。右边以及当我尝试以同样的方式设置它时，它没有正常工作。有没有办法根据以下内容更改2个不同元素中的属性：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;
}

谢谢！

Answer 1

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

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

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

如何根据一个：检查值设置2个不同的元素？

1 个答案: