采用以下示意性 html 代码:
<div>
<span id='1' cust-attr='' />
<span id='2' />
<span id='3' cust-attr='Foo' />
</div>
现在我正在寻找一个选择器来查找所有没有属性“cust-attr”或其“cust-attr”值为空的
span
。我尝试了以下选择器,结果如下:
span[cust-attr!=]
选择 2 和 3span[cust-attr='']
只选择1span:not([cust-attr])
选择2span(:not([cust-attr]),[cust-attr=''])
选择全部三个span([cust-attr=''],:not([cust-attr]))
选择1但是,我没有找到只选择1和2的。
你知道有这种可能性吗?
请注意,我想避免:
span:not([cust-attr]),span[cust-attr='']
因为“跨度”实际上是一个更复杂的表达方式。
基本上,不要。
将所有逻辑放入选择器中并不是一个好习惯。它最终将在计算上非常昂贵(因为在解释这些部分之前需要从字符串中解析出这些部分)并且很混乱。使用
filter
方法的美妙之处来代替:
$('span')
.filter(function(){
return !$(this).attr('cust-attr');
});
这将从选择中删除
cust-attr
为非空字符串的所有元素。
为什么不先选择所有 SPAN,然后向下过滤选择?例如
$('span').filter('[cust-attr=""],:not([cust-attr])')
:where()
或 :is()
像这样:
span:where([cust-attr=""], :not([cust-attr]))
或者这个:
span:is([cust-attr=""], :not([cust-attr]))
:where()
与:is()
的唯一区别是特异性:where() 和 :is() 之间的区别在于 :where() 始终具有 0 特异性,而 :is() 则采用其参数中最具体选择器的特异性。
使用
:where()
不会增加特异性。使用 :is()
将使用最高的选择器特异性。
特异性:
>id
|class
|attribute
>pseudo-class
。element
注意:
pesudo-element
选择器在两者中都不起作用(即:::before
)。
span:where([cust-attr=""], :not([cust-attr])) {
text-decoration: underline;
}
span:is([cust-attr=""], :not([cust-attr])) {
color: red;
}
<div>
<span id='1' cust-attr="">Text 1</span>
<span id='2'>Text 2</span>
<span id='3' cust-attr='Foo'>Text 3</span>
</div>