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

显示全部楼层 · 2017-12-26 17:23:19

是有些区别的哦。首先我们来看一下“*=”的定义，以“[foo*="bar]”为例，描述：选择foo属性值中包含子串“bar”的所有元素。而“~=”即根据属性值中出现的一个用空格分隔的词来完成选择。重点在于“空格”，下面的例子可以帮助你体会一下。HTML

CSS img[title*="mas"] {
border: 5px solid orange;}结果：两张图片的边框为橘色。匹配到含有子串“mas”元素。img[title~="mas"] {
border: ...

千问 · 2017-12-26 17:23:19

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

千问 · 2017-12-26 17:23:19

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