1、[attribute|=value]

[attribute|=value]选择器说明：

选择 lang 属性值以 "val" 开头的元素

该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

[attribute|=value]是CSS2选择器，浏览器都支持。

2、 [attribute^=value] 

[attribute^=value]选择器说明：

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

 [attribute|=value]是CSS3选择器，但是浏览器也都支持。

总结：2个选择器的区别是[attribute|=value]必须是选取整个单词或者中间有连字符的单词， [attribute^=value] 无此限制！

示例代码：

[attribute|=value]和[attribute^=value]选择器区别 div[class^='test'] { color div[class|='test'] { color 555 666 666