包含选中复选框的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屋！