[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

w3schools是一个众所周知的不可靠的来源,与W3C无关.相反,请参阅官方CSS标准:

[attribute~=value]匹配以空格分隔的列表中的任何条目.
它匹配attribute="a value b",但不匹配attribute="a valueb".

[attribute*=value]匹配任何子字符串.
它匹配attribute="a value b"和attribute="a valueb",但不会attribute="x".

Answer 2

根据规格：

[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空格与属性其他部分分隔的 div。