[属性~=值]和[属性*=值]之间的区别

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。

Answer 3

请不要使用 w3schools。这是一个糟糕的网站。您可以在此处找到更多有关其不良原因的信息。

您可以在 w3c 上找到有关 CSS3 选择器的良好参考：

E[foo~="bar"] 一个 E 元素，其“foo”属性值是一个列表
空格分隔的值，其中之一完全等于“bar”

E[foo*="bar"] 一个 E 元素，其“foo”属性值包含
子字符串“bar”

http://www.w3.org/TR/selectors/#selectors

Answer 4

这就是为什么这里的人不鼓励使用 w3schools.com 作为参考网站。他们网站上对这两个选择器的描述确实不容易区分它们。

更好的资源是 W3C 官方文档——其中的区别相当清楚：http:// /www.w3.org/TR/selectors/

E[foo~="bar"] 一个 E 元素，其“foo”属性值是空格分隔值的列表，其中一个值完全等于“bar”

E[foo*="bar"] 一个 E 元素，其“foo”属性值包含子字符串“bar”

基本上，区别在于 *= 是一个哑通配符；它只会查找匹配的字符串，无论它出现在哪里或其周围是什么，而 ~= 是一个分词通配符；如果匹配值是属性中的不同单词，它将查找匹配值。匹配的单词两侧必须由空格或字符串的开头/结尾包围。

Answer 5

从这个 页面：

E[foo~="bar"] 一个 E 元素，其“foo”属性值是由空格分隔的值的列表，其中一个完全等于“bar”

E[foo*="bar"] 一个 E 元素，其“foo”属性值包含子字符串“bar”

Answer 6

*= 用于子字符串

~= 用于单词搜索

，例如：

"这些是测试单词"

attribute~="est" <= 选定

attribute~="est" <= 未选定（因为“est”不作为单词存在）

检查此链接：http://www.w3schools.com/cssref/css_selectors.asp

Answer 7

来自 jquery 选择器文档：

属性包含选择器 [name*="value"]
选择具有指定属性且其值包含给定子字符串的元素。

属性包含单词选择器 [name~="value"]
选择具有指定属性且其值包含给定单词（以空格分隔）的元素。

换句话说，使用 ~= 要求“value”是单词/标记，因此不会选择“asdfword”，而“asdf word”会被选择。
使用 *= 只是查找子字符串，因此“asdfword”和“asdf word”都会被选择。