CSS：如何选择父母的兄弟

参见英文答案 > Is there a CSS parent selector?27个
我的页面中有以下HTML.

<ul id="detailsList">
    <li>
        <input type="checkBox" id="showCheckBox" />
        <label for="showCheckBox">Show Details</label>
    </li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
</ul>

我无法更改此HTML.我使用以下CSS隐藏了所有LI,除了第一个

ul#detailsList li:nth-child(1n+2) {
    display:none;
}

到现在为止还挺好.我现在要做的是在勾选复选框时使用纯CSS显示隐藏的LI.到目前为止,我最好的尝试是

ul#detailsList li input#showCheckBox:checked + li {
    display:block;
}

显然这不起作用,因为li只会在复选框之后立即选择LI(即兄弟姐妹),而不是父母的兄弟姐妹.

这有可能吗？

解决方法

你不能用CSS做到这一点但是

您可以尝试使用jQuery

$("#showCheckBox").click(function(){
    $(this).parent().siblings().show();
});