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

Question

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

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

什么 CSS 是使我的字段名称为粗体 ("Valid?") 而我的复选框描述符不是粗体的最佳做法？

我尝试了几种添加不同 :not 和 :empty 的变体，但我没有找到正确的选择器 - 两者要么都是粗体，要么都不是粗体。我知道我的 :empty 不起作用，因为文本元素把它搞砸了，但必须有一种简单的方法来只使用只有文本元素的粗体标签。

label:empty {
    font-weight: bold;
}

Answer 1

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

label {
   font-weight: bold;
}

label + label { 
    font-weight: normal
}

Answer 2

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

解决方案 1：first-of-type

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

解决方案 2：first-child

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

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

Answer 3

:empty 伪class 目标元素没有子元素（甚至没有 space）。

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;
}

CSS selector to bold only labels without child elements