包含选中复选框的div后的CSS选择器 [英] css selector for ul after div containing a checked checkbox
问题描述
有没有办法用最小的css来选择一个ul元素,它位于包含checked复选框的div后面?我无法找到答案,所以我希望你们能帮助我。
我使用的原始模型是here: http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/
我的目标是使用最小的标准css制作div-treeview,并避免使用js库等。
这是我的设置: p>
html:
< div class =css-treeview >
< ul>
< li>
< div class =ou>
< input type =checkboxid =mychk/>
< label for =mychk> chktitle< / label>
< / div>
< ul> <! - < - 这是我需要选择的内容 - >
< li><! - 部分内容 - >< / li>
< / ul>
< / li>
< / ul>
< / div>
和我的css:
.css-treeview div.ou + ul / *用于在div'class'后隐藏ul's * /
{
display:none;
}
/ *我尝试过类似的东西,但是如果它在里面,它会选择ul * /
/ * div,我不想要* /
.css-treeview div.ou>输入:checked + ul
{
display:block;
}
是否有一种简单而智能的方式来选择取决于复选框状态的ul ?
试试这个演示
< div class =css-treeview>
< ul>
< li>
< div class =ou>
< label for =mychk> chktitle< / label>
< input type =checkboxid =mychk/>
< ul> <! - < - 这是我需要选择的内容 - >
< li>一些内容< / li>
< / ul>
< / div>
< / li>
< / ul>
< / div>
.css-treeview div.ou ul
{
display:none;
}
.css-treeview div.ou>输入:checked + ul
{
display:block;
}
Is there a way, using minimal css, to select an ul element, which is located directly after a div that contains a checked checkbox? I couldn't find an answer so I hope you guys can help me.
Original model I'm using is here: http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ My goal is to make a div-treeview using minimal, standard css and avoid using js libraries etc.
Here's my setup:
the html:
<div class="css-treeview">
<ul>
<li>
<div class="ou">
<input type="checkbox" id="mychk" />
<label for="mychk">chktitle</label>
</div>
<ul> <!-- <-- this ul is what I need to select -->
<li><!-- some content --></li>
</ul>
</li>
</ul>
</div>
and my css:
.css-treeview div.ou + ul /* for hiding ul's after div with class 'ou' */
{
display: none;
}
/* I tried something like this but this would select the ul if it was inside */
/* the div, which I don't want */
.css-treeview div.ou > input:checked + ul
{
display: block;
}
Is there a simple, smart way to select the ul depending on the checkbox state?
Try This Demo
<div class="css-treeview">
<ul>
<li>
<div class="ou">
<label for="mychk">chktitle</label>
<input type="checkbox" id="mychk" />
<ul> <!-- <-- this ul is what I need to select -->
<li> some content</li>
</ul>
</div>
</li>
</ul>
</div>
.css-treeview div.ou ul
{
display: none;
}
.css-treeview div.ou > input:checked + ul
{
display: block;
}
这篇关于包含选中复选框的div后的CSS选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!