<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(即兄弟姐妹),而不是父母的兄弟姐妹.

这有可能吗？