css - 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;
}

到目前为止，一切都很好。我现在要做的是在勾选复选框时显示那些隐藏的 LI，使用纯 CSS。到目前为止我最好的尝试是

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它。因为您需要捕获复选框的更改事件。