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

一、知识点罗列：

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

[title]

{

color:red;

}

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

[title=W3School]

{

border:5px solid blue;

}

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

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

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

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

5、总结：

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

6、示例：

1.attribute属性中包含value:

1、[attribute~="value"] 属性中包含独立的单词为value

　　 eg:[title~=flower]  

2、[attribute*=value] 属性中做字符串拆分，只要能拆出来value这个词就行

　　 eg:[title*=flower]  

2.attribute属性以value开头:

1、[attribute|=value] 属性中必须是完整且唯一的单词，或者以-分隔开

eg:[lang|=en]  

2、[attribute^=value] 属性的前几个字母是value就可以

e.g:[lang^=en]  

3.attribute属性以value结尾:

1、[attribute$=value] 属性的后几个字母是value就可以

　　　　eg:[src$=".pdf"]

附加看到的博文:  http://blog.sina.com.cn/s/blog_4b32835b01014iv9.html