JavaScript - 选择具有 [data-some] 属性但没有特定值的所有元素

Question

我的项目使用纯 JavaScript。我想选择 data-some 属性值不为“abcd”的元素。我尝试了以下方法。

 :not([data-some="abcd"])

此选择器仅返回不具有 [data-some] 的元素。但我只想选择不具有 data-some 属性为“abcd”的元素。它可以有 [data-some="gtf"]。

非常感谢任何帮助。

注意:我只粘贴了选择器，因为我只需要它们。大多数 stackoverflow 问题都有选择没有特定数据属性的元素的答案。

Answer 1

您可以使用单个(尽管相当复杂)选择器:

[data-some]:not([data-some="abcd"])

注意兼容性，您可能需要一个更简单的选择器以及一些脚本，具体取决于您需要支持的主机。

例如

[data-some]:not([data-some="abcd"]) {
   background-color: #ffff66;
}

<p data-some="abcd">data-some="abcd"</p>
<p data-some="zzz">data-some="zzz"</p>
<p data-some="">data-some=""</p>
<p>no data-some attribute</p>