是有些区别的哦。
首先我们来看一下“*=”的定义，以“[foo*="bar]”为例，描述：选择foo属性值中包含子串“bar”的所有元素。
而“~=”即根据属性值中出现的一个用空格分隔的词来完成选择。重点在于“空格”，下面的例子可以帮助你体会一下。
HTML
<img src = "images/1.jpg" title="Christmas"><img src = "images/2.jpg" title="Xmas">
CSS
img[title*="mas"] {border: 5px solid orange
}
结果：两张图片的边框为橘色。匹配到含有子串“mas”元素。
img[title~="mas"] {border: 5px solid orange
}
结果：两张图片的边框没有变化。没有一个可以匹配到，因为"mas"前面没有空格隔开。
再看下面的一个例子
HTML
<img src = "images/myroom.jpg" alt="myroom>CSS
img[src*="room"] {border: 5px solid green
}
结果：以"myroom"为名称的图片边框变成绿色。
img[src~="room"] {border: 5px solid green
}
结果：以"myroom"为名称的图片边框无变化。道理和上面一样，要有空格隔开。
结论：
虽然“~=”定义能用于任何属性，但css图片、文件夹的名称不能允许有空隔（一般会用下划线代替），所以“~=”可以说是不能用于src属性。而“*=”是能用于任何属性。
希望能帮到你！
1、首先找到需要修改的css文件2、然后双击打开
如果你没有安装相应的代码编辑器，那只能使用记事本打开了，没有语法高亮和代码提示。
3、这里我们使用Sublime Text这款代码编辑器进行编辑。
4、我们可以看见，css文件的规则是，选择器{属性名:属性值}的形式，下面我们增加一个img的样式
选择器是img，样式是width: 100px；
