我可以仅使用 CSS 根据复选框的状态设置标签样式吗？

在没有 JavaScript 的情况下根据复选框状态设置标签样式

问题：

是否可以根据相应复选框的选中状态修改标签的样式，而无需求助于JavaScript？

答案：

是的，可以在 CSS 中使用相邻同级组合器。

解释：

通过利用相邻同级组合器 ( )，您可以定位紧随指定元素之后的元素。在本例中，我们使用它来设置与选中的复选框 (.check-with-label:checked) 相邻的标签 (.label-for-check) 的样式。

示例：

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

<div>
  <input type="checkbox" class="check-with-label">

在此示例中，当选中 ID 为“idinput”的复选框时，其后面的“我的标签”标签会变得大胆。这是因为标签满足以下条件：

• 由于组合器，它与选中的复选框相邻。
• 它与 .label-for-check 类选择器匹配。

以上是我可以仅使用 CSS 根据复选框的状态设置标签样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！