基于单选按钮选择显示/隐藏CSS链接

Question

我试图根据当前选中的单选按钮来显示/隐藏超链接。这是工作，直到我包裹<ul><li>元素内的单选按钮。

CSS

.site { 
    opacity: 0; 
    height: 0px; 
    -moz-transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out; 
    -webkit-transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out; 
    transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out; 
} 
input[id=rbSites]:checked ~.site { 
    opacity: 1; 
    height: 15px; 
} 

HTML

<input type="radio" id="rbSites" name="types"> 
<label for="supportCase">Sites</label> 
<input type="radio" id="rbOther" name="types"> 
<label for="other">Other</label> 
<div class="cell site">Link to</div> 
<a class="site">SiteX</a> 
<a class="site">SiteY</a> 
<a class="moblie">AppX</a> 

上述停止只要单选按钮被包裹内部<ul><li>元件工作，这样的：

<ul> 
    <li> 
    <input type="radio" id="rbSites" name="types"> 
    <label for="supportCase">Sites</label> 
    <input type="radio" id="rbOther" name="types"> 
    <label for="other">Other</label> 
    </li> 
<ul> 

参见jsFiddle without <ul><li>和with <ul><li>。

Answer 1

问题是，.site不再是兄弟，所以~.site选择器不工作，一旦单选按钮被包装在<ul><li>内。

您需要一个附加的母体选择器（选择<ul>然后~.site）或方法来选择具有一定是childElement（所检查的单选按钮）的元件（<ul>）。

不幸的是，我担心这两个选项只会在CSS4中可用。另请参阅this和this的答案。