请问[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似乎没有明确区分这种区别。使用better resource。

Answer 2

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

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

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