In che modo è diverso da nei selettori di attributi CSS?

Forse mi manca qualcosa, ma sembrano simili. Se usi per esempio …

a[alt~="thumb"] 

o…

 a[alt*="thumb"] 

Cosa posso restringere la mia selezione in modo diverso? Sono consapevole che ~ ti dà una corrispondenza parziale tra virgolette mentre * ti dà una corrispondenza parziale. Ho intenzione di giocherellare un po ‘con il codice, ma dato che non sono riuscito a trovare una domanda sull’argomento, ho pensato che sarebbe comunque un buon argomento.

Dalla guida di JQuery (che supporta i selettori standard):

 a[alt~="thumb"] 

Descrizione: seleziona gli elementi che hanno l’attributo specificato con un valore contenente una parola data, delimitata da spazi. Questo selettore corrisponde alla stringa di test rispetto a ciascuna parola nel valore dell’attributo, dove una “parola” è definita come una stringa delimitata da spazi bianchi. Il selettore corrisponde se la stringa di test è esattamente uguale a una qualsiasi delle parole.

 a[alt*="thumb"] 

Descrizione: seleziona gli elementi che hanno l’attributo specificato con un valore contenente la sottostringa fornita. Questo è il più generoso dei selettori di attributo jQuery che corrispondono a un valore. Selezionerà un elemento se la stringa del selettore appare ovunque all’interno del valore dell’attributo dell’elemento. Confronta questo selettore con il selettore di parole Attribute Contains (es. [Attr ~ = “word”]), che è più appropriato in molti casi.

Fondamentalmente il selettore ~= corrisponde solo se il valore viene trovato circondato da uno spazio bianco. Il selettore *= corrisponde se il valore viene trovato ovunque.

 

div[alt~='head'] corrisponderebbe solo al secondo div, ma div[alt*='head'] corrisponderebbe a entrambi.

[att~=value] è un selettore di parole contiene .

Quindi un selettore [alt="foo"] corrisponderà ma non corrisponderà .

[alt*="foo"] corrisponderà ad entrambi, perché questo non discrimina parole o cose del genere. Finché è nel valore, colpisce.