Question

css属性选择器中*=和~=有什么区别呢？

看了w3school上的讲解，没有看出这两种属性选择器的区别啊，请高手指点。

Answer 1

是有些区别的哦。

首先我们来看一下“*=”的定义，以“[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属性。而“*=”是能用于任何属性。

希望能帮到你！

Answer 2

[title~='this'] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
比如<img title='yes this' />
[title*='this'] 选择具有att属性且属性值为包含val的字符串的E元素。
比如<img title='thisistrue' />

Answer 3

[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素 <a abc="def" ....> <a abc="defg" ...>
[abc~="def"] 选择 abc 属性值等于“def"的所有元素 <a abc="def" ...> 不能选择 <a abc="defg" ...>

Answer 4

没发现什么不同。
~=用的好像多点吧