1、[attribute|=value]
[attribute|=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp
选择 lang 属性值以 "val" 开头的元素
该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。
[attribute|=value]是CSS2选择器，浏览器都支持。
2、 [attribute^=value]
[attribute^=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attr_begin.asp
[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。
[attribute^=value]是CSS3选择器，但是浏览器也都支持。
总结：2个选择器的区别是[attribute|=value]必须是选取整个单词或者中间有连字符的单词， [attribute^=value] 无此限制！
示例代码：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>[attribute|=value]和[attribute^=value]选择器区别</title>
<style type="text/css">
/*3个DIV均起作用*/ div[class^='test'] {
color: red;
}
/*只有前2个DIV起作用*/ div[class|='test'] {
color: green;
}
</style>
</head> <body>
<div class="test">
555
</div>
<div class="test-test">
666
</div>
<div class="test2">
666
</div>
</body> </html>