Was ist der Unterschied zwischen [Attribut | = Wert] und [Attribut^= Wert] CSS-Selektoren?

Question

Was ist der Unterschied zwischen den folgenden zwei CSS-Selektoren?

[attribute|=value] und [attribute^=value]

Auf W3Schools, die Dokumentation sagt:

[lang | = de] Wählt alle Elemente mit einem lang Attributwert beginnend mit "en"

a [href^= "https"] Wählt jedes <a> Element aus, dessen href-Attributwert mit "https" beginnt

Gibt es einen Unterschied zwischen "beginnt mit" und "beginnt mit" oder stimmen die beiden Selektoren mit den gleichen Elementen überein?

Answer 1

MDN has the better description:

[attr|=value]
ein Element mit einem Attributnamen von attr. Ihr Wert kann genau "Wert" sein oder kann mit "Wert" beginnen, unmittelbar gefolgt von "-" (U + 002D). Es kann für die Sprache Subcode-Übereinstimmungen verwendet werden.

[attr^=value]
ein Element mit einem Attributnamen von attr und dessen Wert wird durch "value" vorangestellt.

So würde [attr|=foo]attr="foo" oder attr="foo-bar", entsprechen aber nicht attr="foobar".
[attr^=foo] auf der anderen Seite würde jeder von denen übereinstimmen.

Der primäre Zweck von |= ist, wie beschrieben, für den Abgleich von Sprach-/Sprachcodes wie en-us. Beachten Sie, dass Sie speziell für Sprachen :lang() verwenden sollten, was viel flexibler ist.

Answer 2

Sie sind ähnlich, aber etwas anders. Als W3 states das Rohr Format: [attribute|=value]

[att | = val] Stellt ein Element mit dem att Attribute, dessen Wert entweder zu sein genau "val" oder beginnend mit "val" sofort gefolgt von "-" (U + 002D). Dies soll in erster Linie ermöglichen, dass die Sprache Subcode-Übereinstimmungen (z. B. das hreflang-Attribut auf dem a-Element in HTML) wie in BCP 47 ([BCP47]) oder seinem Nachfolger beschrieben. Für lang (oder xml: lang) Sprach-Subcode-Übereinstimmung, siehe bitte: lang Pseudo-Klasse.

So passt, dass ein Element mit einem Attribut, wenn der Wert genau val ist oder der Wert beginnt mit val-.

[attribute^=value] entspricht einem Element, bei dem das angegebene Attribut einfach mit value beginnt.Dies würde passen <a href="https://www.google.com"> und <a href="https://www.yahoo.com">