如何使用css检查收音机上的标签

Question

我在这个标签标签中有一个复选框。

<label class="duck duck1">
  <input type="checkbox">
</label>

如果我点击复选框，标签和复选框，我想要的是display:none而不是jquery。

我试过了。

.duck input[type=checkbox]:checked + label.checkbox  {display: none;}

jsfiddle

Answer 1

不幸的是，正如我之前所说：使用css，你只能选择一个在你点击之后的元素，而不是之前而不是父元素。

你可以解决这个问题。看看以下代码：

如果您重新构建html以在复选框后面添加标签，并将动画类添加到复选框中，则将其与标签对齐：

<div class="main">
    <input type="checkbox" class="duck duck1 cb_1"></input>
    <label class="duck duck1"></label>
</div>

您可以通过以下方式选择两者：

input[type=checkbox].cb_1:checked,
input[type=checkbox].cb_1:checked + label {
    display: none;
}

这是一个固定的 Fiddle

（.cb_1类仅用于使z-index复选显示在标签上方，并避免页面上的其他复选框隐藏不相关的标签）

<强>更新

另一种解决方法是使用:after伪选择器创建标签（或鸭子图像精灵）：

.duck:after{
    content:'';
    width: 50px;
    height: 50px;
    position: absolute; 
}

以下是:after选择器的示例： Duck Fiddle