css - usa il selettore universale '*' rispetto a html o al selettore del corpo?

Differenze funzionali tra queste due scelte del selettore CSS ... (mia opinione)

corpo

• Applica le proprietà di stile all'elemento body.
• Gli elementi all'interno del corpo possono ereditare i valori delle proprietà. Alcune proprietà sono predefinite come "inherit".
• Le dichiarazioni di stile che corrispondono a un elemento all'interno del corpo possono sovrascrivere lo stile ereditato.

Universal Selector * (tutti gli elementi)

• Applica le proprietà di stile a tutti i singoli elementi.
• Sostituisce le proprietà di stile ereditate e i 'valori iniziali' predefiniti. Ereditarietà dei blocchi.
• Altri selettori CSS più specifici che corrispondono a un elemento sostituiranno le proprietà di stile applicate da *.

Suggerimenti

1. Usa il corpo per le proprietà di stile che ereditano automaticamente, come font, colore, per fornire un valore predefinito per gli elementi, riducendo la necessità di codificare esplicitamente per ogni caso e preservando la capacità di elementi contenuti a livelli inferiori sotto il corpo per ereditare dai loro genitori.
2. Probabilmente è meglio non utilizzare Universal Selector * in questo caso. Interrompe l'ereditarietà tra altri elementi all'interno del corpo e può costringerti a scrivere più regole CSS per compensare. Può essere un fattore nel rallentare il rendering delle pagine. Questo dipende dalla dimensione e dal contenuto della pagina e da quante regole css ci sono.

Prova qualcosa di simile

body { font-family: Verdana }
table { font-family: Arial }

contro

* { font-family: Verdana }
table { font-family: Arial }

E vedi quali stili sono applicati alle celle della tabella.

C'è una differenza tra "applicato all'intero documento" e "applicato a ogni elemento del documento" quando hai a che fare con i fogli di stile a cascata .

L'applicazione di uno stile CSS al corpo lo applica a tutti i tag all'interno del corpo finché un tag non lo sovrascrive. Quindi lo stile sovrascritto viene applicato a tutti i tag all'interno di quello.

Tuttavia, ci sono alcuni stili che non si sovrappongono, come margine e padding (di solito dove non ha senso). Questi possono essere applicati solo a tag specifici ed è qui che un carattere jolly può tornare utile (anche se raramente).

La maggior parte degli stili non a cascata ha anche un valore di inherit (ad esempio margin: inherit ), che significa "prendere i valori del tag genitore".

Ho dimenticato i dettagli completi ma, con il selettore *, le prestazioni vengono rallentate quando ogni elemento viene valutato mentre il browser analizza il CSS e applica lo stile. iirc, impostando il carattere, in questo caso, solo il genitore crea un riferimento per ciascun elemento e non è necessario ulteriore lavoro.

Ci sono anche altri problemi, ma, ancora una volta, non li ricordo tutti e non ho usato * da anni.

Le linee guida generali per un buon design CSS devono essere il più specifiche possibili, ma non di più.

Quindi, nel tuo esempio, applicare lo stile all'elemento body sarebbe il più specifico possibile e sicuramente più specifico del selettore '*'.

Come altri hanno menzionato, body { font-family: Verdana } selezionerà il font Verdena solo per quegli elementi che ereditano la proprietà font-style dai suoi genitori in modo tale che anche tutti i suoi genitori ereditino la proprietà eventualmente body element, e, * {font-family: Verdana} selezionerà il font Verdena per tutti gli elementi. Mi piacerebbe illustrare la differenza con un esempio:

Uso del selettore del corpo:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Uso del selelctor universale * :

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Usa i codici css e html degli esempi riconoscerai che l'elemento <input> non eredita affatto lo stile del font e quindi qualsiasi cosa tu scriva nel form assume lo stile font predefinito dello stile user-agent foglio. Nel secondo esempio, il selettore universale * imposta esplicitamente lo stile del carattere per ogni elemento, incluso l'elemento input .