属性选择符，根据部分属性值选择
使用属性选择符匹配子串
[foo|="bar"] 选择的元素有foo属性，且其值以bar和一个英文破折号（U+002D）开头，或者本身就是bar本身
[foo|="bar"]选择的元素有foo属性，且其值是包含bar这个词的一组词
[foo|="bar"]选择的元素有foo属性，且其值包含子串bar
[foo|="bar"]选择的元素有foo属性，且其值以bar开头
[foo|="bar"]选择的元素有foo属性，且其值以bar结尾
eg：[ lang | = "en" ] {
color:white;
}
这个规则选择lang属性值为en或以en-开头的元素
<h1 lang="en">属性选择符匹配子串</h1>
<p lang="en-us">选择en或者以en-开头的元素</p>
<div lang="en-au">头三个适用上述规则</div>
<p lang="fr">这个不会被选中</p>
<h2 lang="cy-en">这个也不会被选中</h2>
一般来说，[ att | = "val" ]形式可用于选择任何属性及其值。假设一个html文档中有一系列插图，而插图的文件名是figure-1.gif和figure-2.jpg这样的。
使用下述选择符可以匹配所有插图：
img[src|="figure"] {
border: 1px solid gray;
}