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来说是不可能的。我的目标是避免使用CSS工作的javascript。如果这是一个解决方案，我愿意研究SASS / LESS。

Answer 1

我重新安排了您的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>

请告诉我这是否适合您。

Answer 2

根据Gaby的评论，我将标记调整为更像这样： 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; }

过滤确实有效，但无线电选项不可见，我能够为视觉提示做的最好的事情是：在活动时给出标签样式。

这足以满足我的需求。

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

2 个答案: