如何使用CSS选择其中没有跨度的标签标签

Question

是否有可能使用CSS定位所有没有跨度的标签标签：

<label><span></span>foo</label>    <-- don't target this one
<label>bar</label>                 <-- do target this one

Answer 1

您可以尝试使用:empty伪选择器。

label:empty{//some css here}

如果要定位它们以便可以修改内容，则应使用JavaScript，例如jQuery代码：

$('label:empty').html('Your added html content here');

Answer 2

我当时以为我可能必须使用jQuery，因此我的定位问题也将在这里提供帮助。

使用jQuery，您可以遍历每个label ，过滤掉所有包含span元素的label 。 为此，我们可以使用jQuery的filter()方法 ：

此方法的第二种形式[ filter ]允许我们根据函数而不是选择器来过滤元素。 对于每个元素，如果函数返回true （或“真实”值），则该元素将包含在过滤后的集中； 否则将被排除。

$('label').filter(function() {
    return $(this).children('span').length == 0;
});

这将选择所有label的元素（ $('label')然后遍历所有这些使用filter()以确保没有孩子span元素被发现（如果有儿童span元素，在length属性将等于匹配的数量）。

Answer 3

确定目标后，您要做什么。

如果您希望将文本定位到跨度之外，则可以执行以下操作

label { color: red; }
label span { all: initial; }

但是我不知道这是否可以解决您的问题，甚至可以解决您的问题。