Question

我有以下内容：

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; font-size: 16px; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046"; font-size: 16px;} /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

我怎样才能改变这一点，以便在我只需要在输入中添加一个名为“facheck”的类之前不需要标签

Answer 1

如果你不想使用兄弟选择器，你应该在lable元素上添加类：

.unchecked {
  content: "\f096"; font-size: 16px;
  letter-spacing: 10px;
}

.checked {
  content: "\f046"; font-size: 16px;
  letter-spacing: 5px;
}

然后在你的HTML中：

<label class="unchecked"></label>

和

<label class="checked"></label>

我认为没有兄弟选择器（+）没有其他方法可以做到这一点。这就是css所说的：'如果未选中复选框样式，则使用此样式的标签...'

如何修改CSS以要求类而不是“+标签”？

1 个答案: