什么'；[属性|=值]和[属性^=值]CSS选择器之间的区别是什么？

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

[属性|=值]

和

[属性^=值]

关于这一点，文件说：

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

[href^=“https”]选择href属性值以“https”开头的每个

元素

“从开始”和“从开始”之间有区别吗？或者这两个选择器是否匹配相同的元素？

:

[attr|=value]

表示属性名为的元素 attr。它的值可以是“值”，也可以以“值”开头 紧接着是“-”（U+002D）。它可以用于语言 子代码匹配

[attr^=value]

表示属性名为attr的元素 其值的前缀为“value”

因此

[attr |=foo]

将匹配

attr=“foo”

或

attr=“foo-bar”

，但不匹配

attr=“foobar”

另一方面，

[attr^=foo]

将匹配其中任何一个

---

如前所述，

|=

的主要目的是匹配语言环境/语言代码，如

en-us

。请注意，对于特定的语言，您应该使用更灵活的语言。

它们相似，但略有不同。管道格式为：

[attribute |=value]

[att |=val]表示具有att属性的元素，即其值 要么完全是“val”，要么立即以“val”开头 后跟“-”（U+002D）。这主要是为了允许语言 子代码匹配（例如，中a元素上的hreflang属性） 如BCP 47（[BCP47]）或其后续文件所述。为朗（或 xml:lang）语言子代码匹配，请参见：lang 伪类

因此，它将一个元素与一个属性相匹配，该属性的值正好是

val

，或者该值以

val-

开头

---

[attribute^=value]

匹配给定属性仅以

值开始的元素。这将匹配
和
考虑搜索w3schools以外的其他网站，例如MDN：它们有更好的信息。这两个选择器不同（因为它们指的是不同的属性）-但所有其他东西都相同，请参阅@MikeMcCaughan的链接。。。