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();
});