是有些区别的哦。
首先我们来看一下“*=”的定义，以“[foo*="bar]”为例，描述：选择foo属性值中包含子串“bar”的所有元素。
而“~=”即根据属性值中出现的一个用空格分隔的词来完成选择。重点在于“空格”，下面的例子可以帮助你体会一下。
HTML
CSS
img[title*="mas"] {
border: 5px solid orange;
}
结果：两张图片的边框为橘色。匹配到含有子串“mas”元素。
img[title~="mas"] {
border: 5px solid orange;
}
结果：两张图片的边框没有变化。没有一个可以匹配到，因为"mas"前面没有空格隔开。
再看下面的一个例子
HTML
img[src*="room"] {
border: 5px solid green;
}
结果：以"myroom"为名称的图片边框变成绿色。
img[src~="room"] {
border: 5px solid green;
}
结果：以"myroom"为名称的图片边框无变化。道理和上面一样，要有空格隔开。
结论：
虽然“~=”定义能用于任何属性，但css图片、文件夹的名称不能允许有空隔（一般会用下划线代替），所以“~=”可以说是不能用于src属性。而“*=”是能用于任何属性。
希望能帮到你！
