CSS选择器仅对没有子元素的标签加粗 [英] CSS selector to bold only labels without child elements

问题描述

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

I have a basic html form where label tags are used to define field names and where label tags are used around checkboxes so that a user clicking on the text next to a checkbox also selects the checkbox.

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

哪种CSS是最佳做法，以便我的字段名称为粗体(有效?")，但我的复选框描述符不是粗体?

What CSS is the best practice so that my field name is bold ("Valid?"), but my checkbox descriptor is not bold?

我尝试了几种添加不同的:not和:empty的变体，但是我没有找到正确的选择器-两者都为粗体或都不为粗体.我知道我的:empty不能正常工作，因为文本元素将其弄乱了，但是必须有一种简单的方法来仅包含文本元素的粗体标签.

I have tried several variations adding different :not and :empty, but I'm not hitting the right selector - either both are bold or neither are bold. I know my :empty isn't working since the text element messes that up, but there must be a simple way to only bold labels that have only text elements.

label:empty {
    font-weight: bold;
}

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

推荐答案

您可以使用下一个同级选择器，如下所示:

You can use the next sibling selector, like this:

label {
   font-weight: bold;
}

label + label { 
    font-weight: normal
}

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

这篇关于CSS选择器仅对没有子元素的标签加粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！