Question

我正在使用Behaves Ganging在另一篇文章中提供的CSS，它根据被检查的输入隐藏和显示内容。

这是CSS

input#show, input#hide {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ label[for="show"]
{
    display: none !important;
}

input#show:checked ~ span#content {
  display:block;
}
input#hide:checked ~ span#content {
    display:none;
}

和HTML

<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">

<span id="content">Content
    <label for="hide">
        <span>[Hide]</span> 
        <input type=radio id="hide" name="group">
    </label>    
</span>

请参阅此处的工作示例：http://jsfiddle.net/khnNe/466/

但是，这个CSS似乎被忽略了：

input#show:checked ~ label[for="show"]
{
    display: none !important;
}

我想在选中输入时隐藏标签“显示”。我尝试了其他几种方法，但都没有效果。 ??

如果我添加CSS

label[for="show"]
{
    display: none !important;
}

[显示]隐藏所以它似乎是

input#show:checked ~ label[for="show"]

是罪魁祸首？

Answer 1

选择器无效，因为标签位于输入之前。

一般兄弟组合子由“波浪号”（U + 007E，〜）字符组成，它分隔两个简单选择器序列。由两个序列表示的元素在文档树中共享相同的父元素，由第一个序列 表示的元素在 之前（不一定立即）由第二个序列表示的元素

您必须撤消DOM顺序：

input#show,
input#hide {
  display: none;
}
span#content {
  display: none;
}
input#show:checked ~ label[for="show"] {
  display: none !important;
}
input#show:checked ~ span#content {
  display: block;
}
input#hide:checked ~ span#content {
  display: none;
}

<input type=radio id="show" name="group">
<label for="show">
  <span>[Show]</span>
</label>
<span id="content">Content

<label for="hide">
    <span>[Hide]</span> 
<input type=radio id="hide" name="group">
</label>
</span>

已检查单选按钮标签的CSS

1 个答案: