html - CSS 允许元素消失但不会在检查事件中重新出现

Question

我试图让我的 CSS 影响复选框后的第二个元素。在我的示例中，我有一个 Font Awesome 符号在未选中时显示，而在选中时显示不同。目前图标隐藏，未选中的图标显示，但选中的图标不显示。请参阅下面的代码或 JSFiddle .

我已经尝试将相邻规则 (+) 与 input:checked + n + y 一起使用，并将包含规则 (~) 与 input:checked ~ n + y 一起使用甚至没有运气的 nth-child 变体。 IMO 如果我能用 CSS 使元素消失，我应该能够让它重新出现，我希望我没有因为一些简单的事情而把我的头发弄得乱七八糟。我知道关于 SO 的其他问题，甚至尝试 input:checked + n + y {} 的解决方法似乎也没有帮助。

附言恐怕 Javascript 替代品对我没有帮助。

.container {
}
.container > label {
    display: block;
    cursor: pointer;
}
.container > label > input {
    visibility: hidden;
}
.container > label > span {
    display: inline-block;
}
.container > label > input + n {
    color: #C77AA6;
}
.container > label > input:checked + n {
    display: none;
}
.container > label > input + n + y {
    display: none;
}
.container > label > input:checked + n + y {
    color: #C77AA6;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 1
    </label>
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 2
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 2a
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 3
    </label>
</div>

Answer 1

选择器看起来不错，你可能只是错过了这个:

.container > label > input:checked + n + y {
    color: #C77AA6;
    display: inline-block; /*add this*/
}

旁注，radio 和 checkbox 功能不同，它们看起来一定不一样。我通过对 radio 图标使用 fa-circle-o 和 fa-dot-circle-o 来解决这个问题。

.container {
}
.container > label {
    display: block;
    cursor: pointer;
}
.container > label > input {
    visibility: hidden;
}
.container > label > span {
    display: inline-block;
}
.container > label > input + n {
    color: #C77AA6;
}
.container > label > input:checked + n {
    display: none;
}
.container > label > input + n + y {
    display: none;
}
.container > label > input:checked + n + y {
    color: #C77AA6;
    display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-circle-o fa-1x"></n>
        <y class="fa fa-dot-circle-o fa-1x"></y>
        Item 1
    </label>
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-circle-o fa-1x"></n>
        <y class="fa fa-dot-circle-o fa-1x"></y>
        Item 2
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 2a
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 3
    </label>
</div>