Question

我试图根据当前检查的单选按钮显示/隐藏超链接。这是有效的，直到我将radiobuttons包裹在<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>

一旦radiobuttons被包裹在<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>）（已检查的radiobutton）

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

根据radiobutton选择显示/隐藏CSS链接

1 个答案: