CSS：如何选择父母的兄弟姐妹

Question

我的页面中有以下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，而不是父母的兄弟姐妹。

这甚至可能吗？

Answer 1

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

您可以尝试使用jQuery

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

Answer 2

单独使用CSS无法实现，您需要使用javascript。因为您需要捕获复选框的更改事件。