CSS：如何选择父对象的兄弟 [英] CSS: how to select parent's sibling

问题描述

我的网页中有以下HTML。

 < ul id = > 
< li> 
< input type =checkboxid =showCheckbox/> 
< label for =showCheckbox>显示详细信息< / label> 
< / li> 
< li> content ...< / li> 
< li> content ...< / li> 
< li> content ...< / li> 
< li> content ...< / li> 
< li> content ...< / li> 
< / ul> 
  

我无法更改此HTML。我已隐藏所有LI，除了第一个使用以下CSS

  ul＃detailsList li：nth-​​child（1n + 2）{
 display：none; 
} 
  

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

  ul＃detailsList li input＃showCheckbox：checked + li {
 display：block; 
} 
  

显然，这不起作用，因为 + li <

这是可能吗？

div

您可以尝试使用jQuery

$ b $

  $（＃showCheckbox）click（function（）{
 $（this）.parent（）。siblings（）。show ）; 
}）; 
  

I have the following HTML in my page.

<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>

I am unable to change this HTML. I have hidden all LI's with the exception of the first by using the following CSS

ul#detailsList li:nth-child(1n+2) {
    display:none;
}

So far so good. What I want to do now is to show those hidden LI's when the the checkbox is ticked, using pure CSS. My best attempt so far is

ul#detailsList li input#showCheckbox:checked + li {
    display:block;
}

Obviously this doesn't work, as the + li will only select LI's immediately after the checkbox (i.e. siblings), not siblings of the parent.

Is this even possible?

解决方案

You cannot do that with CSS but

You can try using jQuery

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

这篇关于CSS：如何选择父对象的兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！