如何根据data属性的部分内容选择元素？

Question

我能否在选择器中使用contains:来选择所有带有data-属性的元素，或者还有其他选择所有这些元素的方法？ 例如，选择包含“NL”或“UK”的所有元素。

- CMartins

---

[data-country*="NL"][data-country*="UK"] 属性包含选择器 [name*=”value”] - Satpal

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

Answer 1

你不想如果使用*，就匹配例如UKR，因此你应该使用~在一个以空格分隔的单词列表中找到一个精确匹配。

[attr~=value]

表示具有属性名称为attr且其值是由单词组成的以空格分隔的列表之一，其中一个单词恰好是value的元素。

请查看这里（阅读时间为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>

- Dalin Huang

---

有没有可能做相反的操作？选择数据不包含某个值吗？我尝试使用$('[data-country*!="All"]').hide(); - CMartins

@CarlosMartins span[data-country]:not([data-country~="UK"]). span[data-country] 选择所有带有 data-country 属性的 span，:not 过滤掉所有包含 UK 的 data-country。 - Dalin Huang

Answer 2

你也可以像这样使用：

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

- Himanshu Upadhyay