从w3c.org开始，这两个CSS属性选择器：
[att|=val] [att^=val] 搜索以val或恰好为val开头的属性值。
如果我说对了，为同样的工作有两个不同的选择器吗？
这两个选择器之间有什么区别？
答案 0 :(得分：3)
它们的工作方式相同，但att|=val的开发是为了选择类似语言代码的内容，或者您是否遵循命名惯例，即使用-分割单词（例如simple-attribute-name }），您可以确保只选择您正在寻找的部分。
两个人都不会一样的例子：
你有两个要素：
<span att="simple-attribute-name">
<span att="simpleattributename">
att|="simple"将匹配第一个span元素，但不会与第二个元素匹配，因为simple后面没有-。
att^="simple"会匹配这两个元素，因为att个值都以simple开头。
此JSFiddle显示了一个可行的示例：
att^="simple"使两个文字都加粗但 att|="simple"仅选择第一个文字并将其设为红色。答案 1 :(得分：1)
我无法提出|=与^=匹配的属性值。 specifications说
[ATT | = VAL]
表示具有att属性的元素，其值正好是“val”或以“val”开头，后跟“ - ”（U + 002D）。这主要是为了允许语言子代码匹配（例如，HTML中的元素上的hreflang属性），如BCP 47（[BCP47]）或其后继者中所述。对于lang（或xml：lang）语言子代码匹配，请参阅：lang伪类。
所以似乎|=是为特定目的而开发的。如果您希望匹配val-但不匹配value，则需要使用它。