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

Question

首先该问题的解决方案:CSS selector to bold only labels without child elements没有解决我的问题。

我的标签仅包含文本，其他标签则包含文本和子输入、选择和文本区域表单元素。

即:

<label class="control-label">State
            <select name="status" id="status" class="form-control">
                <option value="">Choose..</option>
                                ...
                            </select>

        </label>

以及其他类似的:

<label for="defect" class="control-label">Error</label>

我需要将 white-space: nowrap 设置为仅没有子 HTML 元素的标签，正如上面的问题答案所述，我尝试了以下操作:

label{
  white-space: nowrap; /* Label without HTML*/
}
label + label {
  white-space: normal; /* Label with HTML */
}

但是，它不起作用。

Answer 1

一种解决方案是向元素添加一个类并使用 CSS 对其进行相应的格式化。

label.empty {
white-space: nowrap;
}


文档链接: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

其他评论指出使用 :empty但就你而言 <label>包含一些文本并且不作为空应用