基於單選按鈕選擇顯示/隱藏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的答案。