[attribute | = value]と[attribute^= value] CSSセレクタの違いは何ですか？

Question

次の2つのCSSセレクタの違いは何ですか？ W3Schoolsで

[attribute|=value]と[attribute^=value]

、ドキュメントは言う：

[LANG | = EN] "EN" で始まるlang属性値を持つすべての要素を選択し

[HREF^= "https"] href属性の値が "https"で始まる<a>の要素をすべて選択します

"starting with"と "begins with"の間に違いはありますか？または2つのセレクタが同じ要素に一致しますか？

Answer 1

MDN has the better description：

[attr|=value]
は ATTRの属性名を持つ要素を表します。その値は正確に "値"であるか、または "値" で始まり、その後すぐに " - "（U + 002D）が続きます。それは言語のために使用することができます サブコードの一致。

[attr^=value]
のattr と値「値」が付けられの属性名を持つ要素を表します。

ので[attr|=foo]はattr="foo"またはattr="foo-bar"ではなくattr="foobar"にマッチします。一方、
[attr^=foo]はいずれかと一致します。

|=の主な目的は、記載されているように、一致するロケール/言語コードen-usです。特に言語の場合は、:lang()を使用する必要がありますが、これははるかに柔軟です。

Answer 2

これらは似ていますがわずかに異なります。 W3 statesとしてパイプ形式：[attribute|=value]

[ATTは| = valは]のatt属性を持つ要素を表し、その値 いずれかの「ヴァル」正確さまたは直後に 続く「ヴァル」で始まります「 - 」 （U + 002D）。これは主に、BCP 47（[BCP47]）またはその後継者に記載されているように、言語 サブコードマッチ（例えば、 HTMLのa要素のhreflang属性）を許可することを意図しています。 lang（または xml：lang）言語サブコードの一致については、lang 疑似クラスを参照してください。

だから、値が正確であるかval値がval-で始まる属性を持つ要素にマッチします。

[attribute^=value]は、指定された属性が単にvalueで始まる要素と一致します。彼らはより良い情報を持ってhttps://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors：これは<a href="https://www.google.com">と<a href="https://www.yahoo.com">