如何将输入与HTML/CSS中的另一个选择器连接？

因此，按钮和段落有一个祖父母。如何更改此结构，或应添加哪些CSS规则以使其正常工作？

UPD：无JS或jQuery

这是仅使用HTML / CSS即可实现的一种方法。

input ~ p选择每个

元素之后的每个元素。

input:checked选择每个选中的元素。在我们的例子中，我们使用单选按钮，因此我们一次只能选择一个。

input#red:checked ~ .text {
color: red;
}
input#blue:checked ~ .text {
color: blue;
}
input#green:checked ~ .text {
color: green;
}

    

        Red
        Blue
        Green
         
Some text here