有没有办法使用CSS来显示/隐藏不是兄弟姐妹的元素？

Question

我有一些无线电选项，我想要显示/隐藏类。我有一些有这些类的div。

HTML：

<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">one</label> 
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">two</label> 

<div class="one">abc</div> 
<div class="two">def</div> 

CSS：

input.one:checked ~ a.one { display:inline; } 
input.two:checked ~ a.two { display:inline; } 

input.one:checked ~ a:not(.one) { display:none; } 
input.two:checked ~ a:not(.two) { display:none; } 

现在我的标记必须是这样的：

<div class="row"> 
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">one</label> 
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">two</label> 
</div> 

<div class="one">abc</div> 
<div class="two">def</div> 

新的标记意味着输入不再是兄妹的div和CSS不再适用（据我所知）。 我已经尝试了所有我能想到的选择器组合，也许这对于纯CSS来说是不可能的。我的目标是避免JavaScript可以在CSS中工作。如果这是一个解决方案，我愿意研究SASS/LESS。

Answer 1

基础上加比评论我调整了标记看起来更象这样： HTML

<div class="row"> 
<label for="one" class="select radlabel">one</label> 
<label for="two" class="select radlabel">two</label> 
</div> 
<input type="radio" class="one radioselect hide" value="one" id="one" name="opts" /> 
<input type="radio" class="two radioselect hide" value="two" id="two" name="opts" /> 
<div class="one">abc</div> 
<div class="two">def</div> 

CSS

input.one:checked ~ a.one { display:inline; } 
input.two:checked ~ a.two { display:inline; } 

input.one:checked ~ a:not(.one) { display:none; } 
input.two:checked ~ a:not(.two) { display:none; } 

过滤的工作，但无线电选项不可见，最好的，我已经能够做到的视觉线索一直在给标签造型时：活跃。

它适合我的需求。

Answer 2

我已经重新安排了您的HTML以获取您之后的功能。首先，我将您的div上的课程重新命名为显示并隐藏它们。

.three { display:none; } 
.four { display:none; } 

接下来，您将创建逻辑单选按钮时检查您显示一个div。

input.one[type=radio]:checked ~ .three { display:block; } 
input.two[type=radio]:checked ~ .four { display:block; } 

现在，一旦编译成一个它应该如下：

.three { display:none;color:#ff0000;} 
 
.four { display:none;color:#FF8C00;} 
 

 
input.one[type=radio]:checked ~ .three { display:block; } 
 
input.two[type=radio]:checked ~ .four { display:block; }

<div class="row"> 
 
<input type="radio" class="one radioselect" value="one" id="one" name="opts" /> <label for="one" class="select radlabel">Radio one</label> 
 
<input type="radio" class="two radioselect" value="two" id="two" name="opts" /> <label for="two" class="select radlabel">Radio two</label> 
 

 
<div class="three">Radio one DIV</div> 
 
<div class="four">Radio two DIV</div> 
 

 

 
</div>

让我知道这对你的作品。