css - 有没有办法选择一个非子元素？

有没有办法选择一个非子元素？我不太确定该如何表达或解释它。希望代码能说明一切：

小提琴：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节的子级？

最佳答案

从更改您的代码

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