CSS 属性选择器的简单应用以及属性选择器 ~=, |=, ^=, $=, *= 的区别

简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

例子 4
可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

例子 5
根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

先上总结:

“value 是完整单词” 类型的比较符号: ~=, |=

“拼接字符串” 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value:

[attribute~=value] 属性中包含独立的单词为 value，例如：

[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：

[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

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

[lang|=en] --> <p lang="en"> <p lang="en-us">
attribute^=value] 属性的前几个字母是 value 就可以，例如：

[lang^=en] --> <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以，例如：

a[src$=".pdf"]