html - 当单选按钮被选中时如何设置粗体标签

Question

为什么此设置下标签不是粗体？

      <form class="input-group">
<div class="btn-section-operation" id="btn-container-table">
    <label for="radio-selection-range-rows" class="radio-custom-label"><input class="radio-custom input-group-field" id="radio-selection-range-rows" name="radio-selection" type="radio" checked="checked">Rows</label>
    <label for="radio-selection-range-rel" class="radio-custom-label"><input class="radio-custom input-group-field" id="radio-selection-range-rel" name="radio-selection" type="radio">Rows with relations</label>
</div>

Codepen

Answer 1

您不应该使用label:checked ，但是input:checked对于选中的复选框。此外，您使用同级选择器，但您想要设置样式的元素是父元素(标签是输入的父元素)。 CSS 中没有父选择器，所以我的解决方案是使用 span围绕文本。

<label for="radio-selection-range-rows" class="radio-custom-label">
    <input class="radio-custom input-group-field" id="radio-selection-range-rows" name="radio-selection" type="radio" checked="checked">
    <span>Rows</span>
</label>

然后像这样选择:

input:checked ~ span {
    border-color: black;
    font-weight: bold;
}

您还可以输入 outside label并使用其他CSS，但你可能有理由这样做。