不确定带有已检查输入的 CSS 功能答案

【问题标题】：Unsure functionality of css with checked inputs不确定带有已检查输入的 CSS 功能
【发布时间】：2014-11-22 05:40:11
【问题描述】：

我试图使用复选框和标签制作一个仅单击 CSS 的导航系统。除了用于 w3c 的标签和复选框之外，我从来没有玩过太多关于标签和复选框的事情。这是我设法将其放入的最小代码：

.bar{
  list-style-type:none;
}
.bar ul{
  display:none;
}
.bar input[type=checkbox]{
  display:none;
}
label:hover{
    cursor:pointer;
}
input[type=checkbox]:checked + label{
  color:blue;
}
input[type=checkbox]:checked + ul{
  display:inline;
}

<nav>
  <ul class=bar>
    <li>
      <input type=checkbox id=1><label for=1>about</label>
      <ul>
        <li>us
        <li>you
        <li>cheese
      </ul>
   </ul>
</nav>

通过点击“关于”，您可以看到标签成功变为蓝色，但代码中它正下方的ul 没有得到它的inline 显示，它保持显示为none，如指定第 4 行 css，我以前默认隐藏选项卡的。

我做错了什么？

【问题讨论】：

改用通用兄弟组合~。像这样input[type=checkbox]:checked ~ ul 或相邻的兄弟组合+ 两次：input[type=checkbox]:checked + label + ul
见：stackoverflow.com/questions/10782054/… 和 stackoverflow.com/questions/3382078/what-does-mean-in-css/…

标签： html css input click label

【解决方案1】：

试试这个代码 --> JSfiddle

请记住，+ 仅在 ul 是您的 input 的第一个兄弟时才有效。在您的情况下，第一个兄弟姐妹是label，因此它不适用于ul。要完成这项工作，只需使用以下内容：

input[type=checkbox]:checked + label + ul{
    display:inline;
}

【讨论】：

【解决方案2】：

你需要在最后一个css规则中使用~操作符，而不是+；如下所示。有关详细信息，请参阅The CSS Tricks Article。

.bar{
  list-style-type:none;
}
.bar ul{
  display:none;
}
.bar input[type=checkbox]{
  display:none;
}
label:hover{
    cursor:pointer;
}
input[type=checkbox]:checked + label{
  color:blue;
}
input[type=checkbox]:checked ~ ul{
  display:inline;
}

<nav>
  <ul class=bar>
    <li>
      <input type=checkbox id=1><label for=1>about</label>
      <ul>
        <li>us
        <li>you
        <li>cheese
      </ul>
   </ul>
</nav>

希望有帮助:)

【讨论】：