CSS：如何选择父母的兄弟姐妹[重复]答案

【问题标题】：CSS: how to select parent's sibling [duplicate]CSS：如何选择父母的兄弟姐妹[重复]
【发布时间】：2013-06-07 13:34:54
【问题描述】：

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

这可能吗？

【问题讨论】：

CSS 不允许您选择父元素。仅支持兄弟元素和子元素。
简单的答案没有 - css 没有 prrent 选择器

标签： css css-selectors

【解决方案1】：

你不能单独使用 CSS，你需要使用javascript。因为您需要捕获复选框的更改事件。

【讨论】：

【解决方案2】：

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

你可以试试jQuery

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

【讨论】：

这就是我的想法，但我想我会问以防万一。感谢您的建议。