Unterschied zwischen [Attribut ~ = Wert] und [Attribut * = Wert]

Laut Spezifikationen :

[att~=val] : Stellt ein Element mit dem Attribut att dar, dessen Wert eine durch Leerzeichen getrennte Liste von Wörtern ist, von denen eines genau "val" ist. Wenn "val" Leerzeichen enthält, wird es niemals etwas darstellen (da die Wörter durch Leerzeichen getrennt sind). Auch wenn "val" die leere Zeichenkette ist, wird sie niemals etwas darstellen.

[att*=val] : Stellt ein Element mit dem Attribut att dar, dessen Wert mindestens eine Instanz der Teilzeichenfolge "val" enthält. Wenn "val" die leere Zeichenfolge ist, repräsentiert der Selektor nichts.

Der Hauptunterschied ist also, dass * bedeutet, dass val irgendwo im Wert des Attributs sein kann, aber im Fall von ~ muss der val genau den Teil des Wertes haben, der durch getrennt werden kann Leerzeichen (wie class Attribut).

Sie können es hier in Aktion sehen: Ссылка

Die [Klasse * = val] wird auf beide divs angewendet, aber die [class ~ = val] wird auf diejenige angewandt, bei der val durch Leerzeichen von den anderen Teilen eines Attributs getrennt ist.

Bitte benutzen Sie keine w3schools. Es ist eine schlechte Seite. Sie können mehr darüber finden, warum es hier schlecht ist.

Sie finden eine gute Referenz zu CSS3-Selektoren auf w3c:

  

E [foo ~="bar"] ein E-Element, dessen "foo" -Attributwert eine Liste von ist   durch Leerzeichen getrennte Werte, von denen einer genau "bar" entspricht

     

E [foo *="bar"] ein E-Element, dessen Attributwert "foo" den Wert enthält   Teilzeichenfolge "bar"

Ссылка

Dies ist der Grund, warum die Leute hier den Gebrauch von w3schools.com als Referenzseite ablehnen. Die Beschreibungen der zwei Selektoren auf ihrer Seite machen es wirklich nicht leicht, sie zu unterscheiden.

Eine bessere Ressource wäre die offizielle W3C-Dokumentation - der Unterschied ist ziemlich klar: Ссылка

  

E [foo ~="bar"] ein E-Element, dessen "foo" -Attributwert eine Liste von durch Leerzeichen getrennten Werten ist, von denen einer genau gleich "bar"

ist      

E [foo *="bar"] ein E-Element, dessen "foo" -Attributwert den Teilstring "bar"

enthält

Grundsätzlich besteht der Unterschied darin, dass *= eine dumme Wildcard ist; Es sucht nur nach der passenden Zeichenkette, egal wo sie erscheint oder um sie herum, während ~= ein Platzhalter für Wortumbrüche ist; Es wird nach dem übereinstimmenden Wert gesucht, vorausgesetzt, es ist ein eindeutiges Wort innerhalb des Attributs. Das übereinstimmende Wort muss auf beiden Seiten entweder von Leerzeichen oder dem Anfang / Ende der Zeichenfolge umgeben sein.

Aus der jquery-Selektor-Dokumentation :

Attribut enthält Selektor [Name *="Wert"] Wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der den angegebenen Teilstring enthält.

Attribut enthält Wortauswahl [Name ~="Wert"] Wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der ein gegebenes Wort enthält und durch Leerzeichen begrenzt ist.

Mit anderen Worten, die Verwendung von ~ = erfordert "value" als Wort / Token, so dass "asdfword" nicht ausgewählt würde, wo dies als "asdf word" angezeigt würde. Die Verwendung von * = sucht nur nach einem Teilstring, so dass sowohl "asdfword" als auch "asdf word" ausgewählt werden.