CSS选择器只加粗没有子元素的标签

Question

我有一个基本的html表单,其中label标签用于定义字段名称,label标签用于复选框周围,以便用户单击复选框旁边的文本也选中该复选框.

<label>Valid?</label>
<label>
    <input type="checkbox" />
    Yes
</label>

什么CSS是最佳实践,以便我的字段名称是粗体("有效？"),但我的复选框描述符不是粗体？

我尝试了好几种变化添加不同的:not和:empty,但我不打正确的选择-要么都是加粗或既不是大胆的.我知道我的:空的不起作用,因为文本元素混淆了,但必须有一个简单的方法只加粗只有文本元素的标签.

label:empty {
    font-weight: bold;
}

Answer 1

您可以使用下一个兄弟选择器,如下所示:

label {
   font-weight: bold;
}

label + label { 
    font-weight: normal
}