我找不到这两个选择器之间的区别。两者似乎做同样的事情，即根据包含给定字符串的特定属性值选择标签。
[attribute~=value]：http://www.w3schools.com/cssref/sel_attribute_value_contains.asp
[attribute*=value]：http://www.w3schools.com/cssref/sel_attr_contain.asp
答案 0 :(得分：16)
w3schools是notoriously unreliable来源，与W3C无关。相反，请参阅official CSS standard：
[attribute~=value]匹配以空格分隔的列表中的任何条目
它与attribute="a value b"匹配，但不与attribute="a valueb"匹配。
[attribute*=value]匹配任何子字符串。
它匹配attribute="a value b"和attribute="a valueb"，但不匹配attribute="x"。
答案 1 :(得分：4)
根据Specs：
[att~=val]：表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正好是“val”。如果“val”包含空格，它将永远不会表示任何内容（因为单词用空格分隔）。此外，如果“val”是空字符串，它将永远不会代表任何东西。
[att*=val]：表示具有att属性的元素，该属性的值至少包含子字符串“val”的一个实例。如果“val”是空字符串，则选择器不代表任何内容。
因此，主要区别在于*表示val可能位于属性值的任何位置，但在~的情况下，val必须是我的确切位置可以用空格分隔的值的一部分（如class属性）。
您可以在此处看到它：http://jsfiddle.net/kizu/bPX9n/
[class * = val]应用于两个div，但[class~ = val]应用于val由属性的其他部分的空格分隔的那个。
答案 2 :(得分：3)
请不要使用w3schools。这是一个糟糕的网站。你可以找到更多关于它为什么不好here的信息。
你可以在w3c上找到关于CSS3选择器的很好的参考：
E [foo~ =“bar”]一个E元素，其“foo”属性值是一个列表 空格分隔的值，其中一个完全等于“bar”
E [foo * =“bar”]一个E元素，其“foo”属性值包含 substring“bar”
答案 3 :(得分：2)
这就是为什么这里的人不鼓励使用w3schools.com作为参考网站。他们网站上两个选择器的描述实际上并不容易区分它们。
更好的资源可以使用官方的W3C文档 - 它的区别非常明确：http://www.w3.org/TR/selectors/
E [foo~ =“bar”]一个E元素，其“foo”属性值是以空格分隔的值列表，其中一个值恰好等于“bar”
E [foo * =“bar”]一个E元素，其“foo”属性值包含子串“bar”
基本上，区别在于*=是一个愚蠢的通配符;它只会查找匹配的字符串，无论它出现在何处或周围是什么，而~=是一个分词通配符;它将查找匹配值，前提是它是属性中的一个独特单词。匹配的单词必须由空格或字符串的开头/结尾两侧包围。
答案 4 :(得分：1)
*=用于子字符串
~=用于搜索字词
例如：
"these are test words"
attribute~="est"＆lt; =已选择
attribute~="est"＆lt; =未选中（因为“est”不作为单词存在）
答案 5 :(得分：1)
从此page：
E [foo~ =“bar”]一个E元素，其“foo”属性值是以空格分隔的值列表，其中一个值恰好等于“bar”
E [foo * =“bar”]一个E元素，其“foo”属性值包含子串“bar”
答案 6 :(得分：1)
来自jquery selector documentation：
属性包含选择器[name * =“value”] 选择具有指定属性的元素，其值包含给定的子字符串。
属性包含Word Selector [name~ =“value”] 选择具有指定属性的元素，其值包含由空格分隔的给定单词。
换句话说，使用〜=要求“value”为单词/标记，因此不会选择“asdfword”，而“asdf word”则会选择。 使用* =只查找子字符串，因此将选择“asdfword”和“asdf word”。