[attribute | = value]和[attribute ^ = value] CSS选择器之间有什么区别？

Question

以下两个CSS选择器有什么区别？

[attribute|=value] 和 [attribute^=value]

在W3Schools上,文档说:

[lang | = en]选择lang属性值以"en"开头的所有元素

a [href ^ ="https"]选择<a>href属性值以"https"开头的每个元素

"以...开头"和"以...开头"之间是否存在差异,或者两个选择器是否匹配相同的元素？

Answer 1

MDN有更好的描述:

[attr|=value]
表示属性名称为attr的元素.它的值可以是"值",也可以以"值"开头,后跟" - "(U + 002D).它可以用于语言子码匹配.

[attr^=value]
表示属性名称为attr且其值以"value"为前缀的元素.

因此,[attr|=foo]将匹配attr="foo"或attr="foo-bar",但不是attr="foobar".
[attr^=foo]另一方面,任何一个都匹配.

如上所述,主要目的|=是匹配区域设置/语言代码en-us.请注意,对于特定语言,您应该使用:lang()它,这更灵活.