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>