问在CSS属性选择器中，[att~=val]与[att*=val]到底有什么不同？

EN

在JQuery帮助(支持标准选择器)中：

a[alt~="thumb"]

说明:选择具有指定属性的元素，这些元素的值包含给定的单词，以空格分隔。此选择器将测试字符串与属性值中的每个单词进行匹配，其中“单词”被定义为由空格分隔的字符串。如果测试字符串与任何单词完全相等，则选择器匹配。

a[alt*="thumb"]

描述:选择具有指定属性的元素，这些元素的值包含给定子字符串。这是与值匹配的jQuery属性选择器中最宽松的一个。如果选择器的字符串出现在元素属性值内的任何位置，它将选择一个元素。将此选择器与属性包含词选择器(例如，attr~=" Word ")进行比较，后者在许多情况下更合适。

基本上，选择器~=只有在值被空格包围时才匹配。如果在任何地方找到该值，则选择器*=将匹配。

<div alt='heading navigation'>
<div alt='head'>

div[alt~='head']只会匹配第二个div，但是div[alt*='head']会同时匹配两个div。

[att~=value]是一个包含word的选择器。

因此，[alt="foo"]选择器将匹配<a alt="foo bar">，但不匹配<a alt="foobar">。

[alt*="foo"]将两者都匹配，因为这不会对单词或其他任何东西进行歧视。只要它在值中，它就会命中。