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

Question

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

Answer 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>

Answer 2

您也可以这样使用：

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