Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/visual-studio-2010/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
有没有一种方法可以使用CSS来显示/隐藏非同级元素?_Css - Fatal编程技术网

有没有一种方法可以使用CSS来显示/隐藏非同级元素?

有没有一种方法可以使用CSS来显示/隐藏非同级元素?,css,Css,我有一些无线电选项,其中包含我想显示/隐藏的类。我有一些有这些课程的div HTML: 现在我的标记必须是这样的: <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="r

我有一些无线电选项,其中包含我想显示/隐藏的类。我有一些有这些课程的div

HTML:

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

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

一
二
abc
def
新的标记意味着输入不再是div的同级,CSS也不再被应用(据我所知)。
我已经尝试了我能想到的所有选择器的组合,也许这在普通CSS中是不可能的。我的目标是避免使用CSS可以工作的javascript。如果这是一个解决方案,我愿意研究SASS/LESS。

我已经重新整理了您的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{显示:无;颜色:#ff0000;}
.four{显示:无;颜色:#FF8C00;}
input.one[type=radio]:选中~.three{display:block;}
input.two[type=radio]:选中~.four{display:block;}

无线电一号
第二台
无线电一组
无线电二组

根据Gaby的评论,我调整了标记,使其看起来更像这样: HTML

过滤确实有效,但收音机选项不可见,我能为视觉提示做的最好的事情就是在:激活时提供标签样式


这很适合我的需要

对于您指定的HTML,这是不可能的。单选按钮是否可见?如果没有,您可以将它们放在
.row
(与以前一样)之外,并将
标签
元素仅保留在
.row
中,这样可能会起作用。我会给你回复的,但是如果你的评论有效的话,我不能选择你的评论作为答案。这和以前差不多,但是现在输入在一个单独的可折叠的div中,其他div是我想要过滤的,但不能通过折叠收音机选项来隐藏。。
.three { display:none; }
.four { display:none; }
input.one[type=radio]:checked ~ .three { display:block; }
input.two[type=radio]:checked ~ .four { display:block; }
<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>
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; }