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

Question

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

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

哪种CSS是最佳做法，以便我的字段名称为粗体（＆＃34;有效？＆＃34;），但我的复选框描述符不是粗体？

我尝试了添加不同:not和:empty的多种变体，但我没有点击正确的选择器 - 要么都是粗体，要么都不是粗体。我知道我：由于文本元素混淆了，所以空无效，但必须有一种简单的方法来只加粗只有文本元素的标签。

label:empty {
    font-weight: bold;
}

JS小提琴：http://jsfiddle.net/z77tq8bs/

Answer 1

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

label {
   font-weight: bold;
}

label + label { 
    font-weight: normal
}

检查小提琴：https://jsfiddle.net/8cLuhznb/

Answer 2

:empty伪类定位没有子元素的元素（甚至没有空格）。

伪类可以通过以下方式使用：http://jsfiddle.net/3z1pnv71/。

HTML：

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

CSS：

label:empty:before {
    content: "Valid?";
    font-weight: bold;
}

编辑：如果合适的话，还可以将所有文本元素保留在HTML中并使用以下方法：http://jsfiddle.net/cqugufex/。

HTML：

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

CSS：

label:empty:before {
    content: attr(data-text);
    font-weight: bold;
}

Answer 3

找到了一些解决方案，两者都有效，因为标签描述符始终是父元素中的第一个标签，任何复选框都是后续标签

解决方案1：first-of-type

label:first-of-type {
    font-weight: bold;
}

解决方案2：first-child

label:first-child {
    font-weight: bold;
}

我仍然没有找到一个解决方案来查找标签是否只有一个文本元素，但这至少适用于大多数情况。