Precedenza del combinatore CSS?

C’è una precedenza ai combinatori come

a > b ~ cd 

(Nota lo spazio tra c e d è il combinatore discendente)

O è solo leggere da sinistra a destra, come

 ((a > b) ~ c) d 

?

No, non vi è alcuna nozione di precedenza nei combinatori. Tuttavia, esiste una nozione di ordine di elementi in un selettore complesso.

Qualsiasi selettore complesso può essere letto in qualsiasi direzione che abbia senso per te, ma ciò non implica che i combinatori siano distributivi o commutativi , poiché indicano una relazione tra due elementi , ad esempio ancestor descendant e previous + next ). Questo è il motivo per cui l’ordine degli elementi è ciò che conta.

Secondo Google , tuttavia, i browser implementano i loro motori di selezione in modo tale da valutare i selettori complessi da destra a sinistra :

Il motore [Gecko] valuta ogni regola da destra a sinistra, partendo dal selettore più a destra (chiamato “chiave”) e spostandosi all’interno di ciascun selettore finché non trova una corrispondenza o scarta la regola.

L’articolo di Mozilla, che scrive CSS efficiente da utilizzare nell’interfaccia utente di Mozilla, presenta una sezione che descrive come il loro motore CSS valuta i selettori. Questo è specifico per XUL, ma lo stesso motore di layout viene utilizzato sia per l’interfaccia utente di Firefox sia per le pagine visualizzate nella finestra di Firefox.

Come descritto da Google nella citazione precedente, il selettore di chiave si riferisce semplicemente alla sequenza di selettori più semplice, quindi di nuovo da destra a sinistra :

Il sistema di stile corrisponde alle regole iniziando con il selettore di chiave, quindi spostandosi a sinistra (cercando eventuali antenati nel selettore della regola). Finché il sottoalbero del selettore continua a spuntare, il sistema di stile continua a spostarsi verso sinistra fino a quando non corrisponde alla regola, o abbandona a causa di una mancata corrispondenza.

Ricorda due cose:

  • Questi sono documentati in base ai dettagli di implementazione ; in fondo, un selettore è un selettore e tutto ciò che si intende fare è abbinare un elemento che soddisfi una determinata condizione (definita dai componenti del selettore). In quale direzione è letto dipende dall’implementazione; come sottolineato da un’altra risposta, la specifica non dice nulla su quale ordine valutare un selettore in o sulla precedenza del combinatore.

  • Né l’articolo implica che ogni semplice selettore sia valutato da sinistra a destra all’interno della sua semplice sequenza di selezione (vedi questa risposta per il motivo per cui credo che non sia così). Quello che gli articoli dicono è che un motore di ricerca valuterà la sequenza del selettore di chiavi per capire se il suo elemento DOM funziona, quindi se lo fa, passa alla successiva sequenza di selettori seguendo il combinatore e controlla gli elementi che corrispondono a quello sequenza, quindi risciacquare e ripetere fino al completamento o al fallimento.


Detto questo, se mi chiedeste di leggere i selettori e di descrivere ciò che selezionano in un inglese semplice, li leggerò anche da destra a sinistra (non che sia certo se questo è rilevante per i dettagli di implementazione!).

Quindi, il selettore:

 a > b ~ cd 

significherebbe:

Seleziona un elemento d
questo è un discendente di un elemento c
che è un fratello di, e viene dopo, un elemento b
questo è un bambino (discendente diretto) di un elemento.

Non importa.

 a > bc 

corrisponderà agli stessi elementi indipendentemente dal fatto che tu lo faccia

 (a > b) c 

o

 a > (bc) 

Penso che i browser vadano da destra a sinistra.

le specifiche non menzionano nulla sulla precedenza (che io possa trovare), ma credo che sia rigorosamente una valutazione da sinistra a destra