有没有办法选择一个不是孩子的元素?

时间:2014-02-21 21:56:13

标签: css3

有没有办法选择一个不是孩子的元素?我不是很确定如何说出来或解释它。希望代码能说明一切:

小提琴:http://jsfiddle.net/kBhgV/3/

HTML:

<div title="section-1">
    <div>
        <input type="checkbox" id="item-1">
            <label for="item-1">Item 1</label>
        </input>
    </div>
</div>
<div title="section-2">
    <div>Test Drop</div>
</div>

CSS:

[title=section-2] {
    display: none;
}
input:checked ~ [title=section-2] {
    display: block;
}

有没有办法当你勾选方框时,它会显示第2节而不会将第2节作为第1节的子节点?

1 个答案:

答案 0 :(得分:2)

更改您的代码
<div title="section-1">
    <div>
        <input type="checkbox" id="item-1">
            <label for="item-1">Item 1</label>
        </input>
    </div>
</div>
<div title="section-2">
    <div>Test Drop</div>
</div>

<input type="checkbox" id="item-1"/>
   <div title="section-1">
    <div>
        <label for="item-1">Item 1</label>
    </div>
</div>
<div title="section-2">
    <div>Test Drop</div>
</div>
那么你的css应该可以正常工作。您可以将复选框的可见性设置为隐藏,并将其放置在页面的某个位置。

我的网站使用类似的导航技术,因此您可以通过检查代码来了解其工作原理。

http://www.aktof.ca/

改变了你的小提琴

http://jsfiddle.net/kBhgV/4/