Specificità delle regole CSS

Come posso contare la specificità delle regole nei CSS? Conosco le cose di base (1000 per lo stile, 100 per l’id, 10 per att / class, ecc.) Tuttavia, continuo a rimanere bloccato troppe volte con cose semplici, ad esempio:

Quanto sarebbe?

.wrapper > div /* ??? */ .inner /* 10 */

La prima regola è applicata, ovviamente. Ma quanto costa?

Fondamentalmente, è come questo:

  • !important stili !important sempre la precedenza su tutti gli altri stili, ma tra gli stili !important si applicano le regole di specificità
  • Gli stili incorporati ottengono 1000 punti “di specificità”
  • Gli ID ottengono 100 punti
  • (pseudo-) classi e selettori di attributi ottengono 10 punti
  • i selettori di tag ottengono 1 punto
  • Se ci sono selettori con uguale specificità, la regola definita per ultima nella pagina sostituirà le altre regole.
  • Il selettore universale * e gli stili ereditati non hanno punti di specificità.

Inoltre, questo sito potrebbe esserti utile. Lo spiega un po ‘oltre.

Dopo aver provato queste regole per me stesso , ho notato che questo non è esattamente vero. L’ordine in cui viene applicata la specificità è ancora valido, ma passando da questo test, non è vero che funzioni effettivamente con questo sistema di punti come la maggior parte dei siti che conosco. Ciò che sembra essere più preciso è mettere gli stili in “scatole”. Userebbe comunque l’ordine delle “scatole” che ho elencato sopra, ma invece contano ogni “scatola”, e se c’è una quantità uguale di selettori in quel gruppo, controlla quella successiva. Funzionerebbe quindi in questo modo:

  • !important stili !important sono nella casella 1. Questi stili sovrascrivono tutti gli altri stili. Se ci sono più dichiarazioni dello stesso stile che hanno entrambe la regola !important , allora verrà esaminato lo stile nella casella successiva più alta.
  • gli stili in linea sono nella casella 2. Gli stili in linea sovrascriveranno tutti gli altri stili. Se ci sono più dichiarazioni di stili in linea, verrà applicato quello definito per ultimo.
  • I selettori ID sono nella casella 3. Se ci sono più dichiarazioni dello stesso stile, con la stessa quantità di selettori ID, verrà esaminata la casella più alta successiva.
  • (pseudo-) classi e selettori di attributo sono nella casella 4. Penso che si ottiene la storia cosa succede quando ci sono più dello stesso stile con una quantità uguale di questo selettore …
  • i selettori di tag sono nella casella 5. …
  • i selettori universali sono nella casella 6. Questo box si comporta in modo un po ‘diverso, dal momento che aggiungere più selettori universali non aumenta la specificità, come si può vedere qui , quindi in questa casella si applica solo l’ordine di definizione. Tuttavia, gli stili applicati con un selettore universale annullano gli stili ereditati.
  • Se nessuno stile è stato assegnato direttamente all’elemento, potrebbero essere applicati stili ereditati, a seconda dello stile.

Quindi, in sostanza, se abbiamo uno stile con 1 selettore ID nella parte superiore del nostro foglio di stile e sotto uno stile con più di 10 selettori di class, lo stile con il selettore di ID continuerà a essere applicato. Lo stile con il selettore di ID “ha vinto la battaglia” nella casella 3, quindi le caselle successive vengono ignorate. Il calcolatore di specificità Fabrício Matté collegato a illustrare molto bene.

PS: usare + o > o ~ o qualsiasi altro operatore non influenzerà affatto la specificità. Questi stili hanno esattamente la stessa specificità (quindi si applicherà quest’ultimo):

 div > span {color:red;} div span {color:blue;}