Question

有没有办法，使用最小的CSS，选择一个ul元素，它直接位于包含复选复选框的div之后？我找不到答案，所以我希望你们能帮助我。

我正在使用的原型号在这里：http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ 我的目标是使用最小的标准css制作div-treeview，并避免使用js库等。

这是我的设置：

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>

和我的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;
}

根据复选框状态，是否有一种简单，智能的方法来选择ul？

Answer 1

试试这个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;
}

Answer 2

感谢大家的评论，我接受了Pete's和Amit的回答，因为它给了我很多帮助。如果有人需要像我一样完成同样的事情，可以对我的目标进行一些调整：

这个实际上就是这里给出的答案：

HTML：

<ul class="menutree">
    <li>
        <div class="ou" style="background-color:#B2D1FF;">
            <div class="ou_content">
                Title<br/>
                Other data etc<br/>
                <a href="#">Link</a>
            </div>
            <input type="checkbox" id="item-0-0-1" /><label for="item-0-0-1">&nbsp;&nbsp;V&nbsp;&nbsp;</label>
            <br/>
            <ul>
                <li>
                    <div class="ou" style="background-color:#99C2FF;">
                        <div class="ou_content">
                            Title<br/>
                            Other data<br/>
                            <a href="#">Link</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="ou" style="background-color:#99C2FF;">
                        <div class="ou_content">
                            Title<br/>
                            Other data<br/>
                            <a href="#">Link</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

以上是css：（注意我必须将br添加到选择器中）

body {
    text-align: center;
}

ul {
    display: inline-block;
    padding:0px;
    margin:0px;
    text-align:center;
}

li {
    display: inline-block;
    list-style: none;
    vertical-align:top;
    margin-top:20px;
    margin-right:10px;
    text-align:center;
}

div.ou {
    border:1px solid blue;
    margin:0px;
    margin-right:10px; 
    padding-top:0px;
    padding-left:20px;
    padding-bottom:20px;
    padding-right:0px;
    border-radius:10px;
    text-align:left;
    min-width:100px;
}

div.ou_content {
    min-width:150px;
    padding:4px;
    border:0px solid green;
    margin-top:10px;
    margin-right:10px;
}

label {
    border: 1px solid navy;
    float:right;
    margin-right:0px;
    margin-left:10px;
    display:inline-block;
    cursor:pointer;
    background-color:lightblue;
}


#menutree li {
    list-style: none;
}

.css-treeview input + label + br + ul
{
    display: none;
}

.css-treeview input:checked + label + br + ul
{
    display: inline-block;
    text-align: center;
}

.css-treeview input
{
    opacity: 0;
    display:none;
}

我还做了另一个概念验证：这是我自己的尝试：

Html：

<ol id="menutree">
    <li>
        <div class="contentdiv"> place for content </div>
        <label for="c3" class="menu_label">Title1 &nbsp;&nbsp;V</label>
        <input type="checkbox" id="c3" name="level2" value="1" />
        <ol>
            <li>
                <div class="contentdiv"> place for content </div>
                <label for="c4" class="menu_label">Title2</label>
                <input type="checkbox" id="c4" name="level3" value="1" />
            </li>
            <li>
                <div class="contentdiv"> place for content </div>
                <label for="c5" class="menu_label">Title3</label>
                <input type="checkbox" id="c5" name="level3" value="1" />
            </li>
        </ol>
    </li>
</ol>

为此而css：

#menutree li {
    list-style: none; 
    text-align: center;
}

li .menu_label + input[type=checkbox] {
    opacity: 0; 
    display:none;
}

li .menu_label {
    cursor: pointer; 
} 

li .menu_label + input[type=checkbox] + ol > li {
    display: none; 
}

li .menu_label + input[type=checkbox]:checked + ol > li {
    display: inline-block; 
    text-align: center;
}

li  :not(.menu_label + input[type=checkbox]:checked + ol > li) {
    display: none;
}

div.contentdiv {
    height:40px;
    padding-top:6px;
}

li {
    border-top:4px solid blue;
    border-right: 2px solid blue;
    border-left: 2px solid blue;
    border-bottom: 0px solid blue;

    border-radius:30px 30px 0px 0px;
    margin-top:20px;
    margin-left:6px;
    margin-right:6px;
    padding-right:10px;
    padding-left:10px;
    display: inline-block;
    vertical-align:top;
    text-align: center;
    height:50px;
    min-width:100px;
}

label {
    border: 1px solid navy;
    padding:0px;
    border-radius:0px;
    vertical-align:top;
    text-align: center;
    margin-left:4px;
    margin-right:4px;
}

body {
    text-align: center;
}

ol {
    display: block;
    padding:0px;
    margin:0px;
}

包含选中复选框的div后面的ul的css选择器

2 个答案: