css属性选择器 [title~=hello]，*=，|=，^=，$=，*= 的区别

blog.csdn.net/u012955801/…

1、title 属性的所有元素设置样式：

[title]
{
color:red;
}

2、title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

3、包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

3.1、title中包含指定字符串 的属性所有元素设置样式。

[title *= 'vue']{
    background: green;
}

// div
<div title="error-vue">error-vue</div>
<div title="success-vue">success-vue</div>

4、带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

5、总结：

["属性选择器"]，~= ， |=，*= , ^= , $=

6、示例：

1.attribute属性中包含value:　
 
    1、[attribute~="value"] 属性中包含独立的单词为value
 
　　    eg:[title~=flower]  <img src="/i/eg_tulip.jpg" title="tulip flower" />
 
    2、[attribute*=value] 属性中做字符串拆分，只要能拆出来value这个词就行
 
　　    eg:[title*=flower]  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
 
 
 
2.attribute属性以value开头:
 
　　1、[attribute|=value] 属性中必须是完整且唯一的单词，或者以-分隔开
 
　　    eg:[lang|=en]  <p lang="en">  <p lang="en-us">
 
　　2、[attribute^=value] 属性的前几个字母是value就可以
 
　　　　e.g:[lang^=en]  <p lang="ennn">
 
 
 
3.attribute属性以value结尾:
 
　　1、[attribute$=value] 属性的后几个字母是value就可以
 
　　　　eg:[src$=".pdf"] <img src="test.pdf">