<分区>
我的页面中有以下 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(即 sibling )，而不是 parent 的 sibling 。
这可能吗？