css - 请问[attribute~=value]和[attribute*=value]有什么区别

Question

找不到这两个选择器之间的区别。两者似乎都在做同样的事情，即根据包含给定字符串的特定属性值选择标签。

对于 [attribute~=value]：http ://www.w3schools.com/cssref/sel_attribute_value_contains.asp

对于 [attribute*=value]：http ://www.w3schools.com/cssref/sel_attr_contain.asp

Answer 1

第一个 ( [attribute~=value]) 是空格分隔的搜索...

<!-- Would match -->
<div class="value another"></div>

...而第二个 ( [attribute*=value]) 是子字符串搜索...

<!-- Would match -->
<div class="a_value"></div>

W3Schools 似乎并没有把这种区别说得很清楚。使用更好的资源。

Answer 2

[attribute~="value"] 选择包含由空格分隔的给定单词的元素，而 [attribute*="value"] 选择包含给定子字符串的元素。

例如，[data-test~="value"] 不会匹配下面的 div，而 [data-test*="value"] 会匹配。

<div data-test="my values go here"></div>