以下两个 CSS 选择器有什么区别？
[attribute|=value] 和 [attribute^=value]
在W3Schools，文档说：
[lang|=en] 选择 lang 属性值以“en”开头的所有元素
a[href^="https"] 选择 href 属性值以“https”开头的每个
<a>元素
“开始于”和“开始于”之间有区别吗？或者这两个选择器会匹配相同的元素？
【问题讨论】：
标签： css css-selectors
MDN has the better description:
[attr|=value]
表示具有属性名称的元素 属性。它的值可以恰好是“值”，也可以以“值”开头 紧跟“-”（U+002D）。它可以用于语言 子码匹配。
[attr^=value]
表示属性名为 attr 的元素 并且其值以“value”为前缀。
所以[attr|=foo] 将匹配attr="foo" 或attr="foo-bar"，但不匹配attr="foobar"。
另一方面，[attr^=foo] 将匹配其中任何一个。
如上所述，|= 的主要目的是匹配区域设置/语言代码，例如en-us。请注意，对于特定的语言，您应该使用 :lang()，但这样会灵活得多。
【讨论】：
它们相似，但略有不同。如W3 states 管道格式：[attribute|=value]
[att|=val] 表示具有att属性的元素，其值 要么完全是“val”，要么立即以“val”开头 后跟“-”（U+002D）。这主要是为了让语言 子代码匹配（例如，a 元素上的 hreflang 属性） HTML)，如 BCP 47 ([BCP47]) 或其后续版本中所述。对于 lang （或 xml:lang) 语言子码匹配，请看 :lang 伪类。
这样就可以匹配一个元素的值正好是val 或值以val- 开头的属性。
[attribute^=value] 匹配给定属性仅以value 开头的元素。这将匹配 <a href="https://www.google.com"> 和 <a href="https://www.yahoo.com">
【讨论】：