如何根據兩種不同的元素進行設計：檢查值？

Question

我有一組單選按鈕，用於爲我創建的測驗定製樣式。 '正常'狀態顯示正常，但我遇到的問題是更改'檢查'狀態的樣式（顏色）。

每個新樣式的「選項」都包含2個跨度，以便在彩色框中顯示編號，並在白色框中顯示文本。當點擊「選擇」時，我已經知道彩色編號框會像它應該那樣改變，但不知道如何同時改變第二個跨度的邊框顏色。

你可以看到正是我的意思是：https://jsfiddle.net/2cs9n7yo/

基本上我希望能夠到中同時。左-COL和.right-COL改變顏色屬性的值 - 。左-COL工作正常，但我不知道如何爲.right-col做這件事，以及當我試圖用同樣的方式設置時，它不能正常工作。有沒有辦法在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; 
} 

謝謝！

Answer 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/