如何根据部分数据属性选择元素？

Posted 2023-03-05

【中文标题】如何根据部分数据属性选择元素？

【英文标题】：How can I select elements based in part of data- attribute?

【发布时间】：2018-02-21 17:37:22

【问题描述】：

我可以在选择器中使用 contains: 来选择所有具有 data- 属性的元素，还是有其他方法可以选择 all 这些元素？ 例如所有包含“NL”或“UK”的元素

【问题讨论】：

[data-country*="NL"][data-country*="UK"]Attribute Contains Selector [name*=”value”]

@Satpal 在这种情况下使用~ 更好，你不想匹配UKR 例如如果使用*

【参考方案1】：

您不想匹配UKR，例如如果使用*，那么您应该使用~ 在以空格分隔的单词列表中查找完全匹配

[attr~=值]

表示属性名称为 attr 的元素，其值是以空格分隔的单词列表，其中一个恰好是值。

看看这里（阅读 2 分钟）

属性选择器

参考号：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[data-country~="UK"] 
  color: red;

<span data-country="USA UK CHN">USA UK CHN</span><br>
<span data-country="USA UK">USA UK</span><br>
<span data-country="UK USA">UK USA</span><br>
<span data-country="UK">UK</span><br>
<hr>
You dont want the following to be matching:<br>
<hr>
<span data-country="USA CHN">USA CHN</span><br>
<span data-country="USAUK">USAUK</span><br>
<span data-country="UKR">UKR</span>

【讨论】：

是否可以反其道而行之？选择数据是否不包含值？我试试 $('[data-country*!="All"]').hide();

@CarlosMartins span[data-country]:not([data-country~="UK"])。 span[data-country] 选择所有具有属性 data-country 的跨度，:not 过滤所有匹配的包含 UK 的数据国家

【参考方案2】：

你也可以这样使用：

$('[data-country^="UK"]') 
  color: red;
);