css - universellen '*' Selektor vs. HTML oder Body Selektor verwenden?

Das Anwenden von Stilen auf das Body-Tag wird also auf die gesamte Seite angewendet

body { font-family: Verdana }

wird auf die gesamte Seite angewendet. Dies könnte auch mit gemacht werden

* {font-family: Verdana} 

Dies würde für alle Elemente gelten und daher den gleichen Effekt zu haben scheinen.

Ich verstehe das Prinzip, dass in erster Linie der Stil auf ein Tag, einen Textkörper für die gesamte Seite, angewendet wird, während im zweiten Beispiel die Schriftart auf jedes einzelne HTML-Element angewendet wird. Was ich frage, ist, was der praktische Unterschied dabei ist, was die Auswirkungen sind und was ein Grund, eine Situation oder eine bewährte Methode ist, die dazu führt, dass man sich gegenseitig nutzt.

Ein Nebeneffekt ist sicherlich die Geschwindigkeit (+1 Rob). Am meisten interessiert mich der eigentliche Grund, in Bezug auf die Funktionalität einen über den anderen zu wählen.

Funktionsunterschiede zwischen diesen beiden Optionen des CSS-Selektors ... (meine Meinung)

Körper

• Wendet Stileigenschaften auf das Körperelement an.
• Elemente innerhalb des Körpers können die Eigenschaftswerte erben. Einige Eigenschaften erben standardmäßig "erben".
• Stildeklarationen, die mit einem Element innerhalb des Körpers übereinstimmen, können den geerbten Stil überschreiben.

Der Universal Selector * (alle Elemente)

• Wendet Stileigenschaften auf alle einzelnen Elemente an.
• Ersetzt geerbte Stileigenschaften und Standard-Anfangswerte. Blockiert die Vererbung.
• Andere, spezifischere CSS-Selektoren, die einem Element entsprechen, ersetzen die von * angewendeten Stileigenschaften.

Vorschläge

1. Verwenden Sie body für Stileigenschaften, die standardmäßig geerbt werden, z. B. Schriftart und Farbe, um einen sinnvollen Standardwert für Elemente bereitzustellen, die Notwendigkeit zu reduzieren, explizit für jeden Fall zu codieren, und die Fähigkeit für Elemente beizubehalten, die auf niedrigeren Ebenen unterhalb von body to enthalten sind von ihren Eltern erben.
2. Wahrscheinlich ist es in diesem Fall besser, den Universal Selector * nicht zu verwenden. Es unterbricht die Vererbung zwischen anderen Elementen innerhalb des Körpers und kann Sie dazu zwingen, mehr CSS-Regeln zu schreiben, um dies zu kompensieren. Dies kann die Wiedergabe von Seiten verlangsamen. Dies hängt von der Größe und dem Inhalt der Seite sowie von der Anzahl der CSS-Regeln ab.

Versuchen Sie so etwas

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

gegen

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

Und sehen Sie, welche Stile auf die Zellen der Tabelle angewendet werden.

Es gibt einen Unterschied zwischen "auf das gesamte Dokument angewendet" und "auf jedes Element des Dokuments angewendet", wenn Sie mit kaskadierenden Stylesheets arbeiten.

Durch Anwenden eines Kaskadenstils auf den Body wird dieser auf alle Tags im Body angewendet, bis ein Tag ihn überschreibt. Dann wird der überschriebene Stil auf alle Tags in diesem angewendet.

Es gibt jedoch einige Stile, die nicht kaskadieren, wie z. B. Rand und Polsterung (normalerweise dort, wo dies keinen Sinn ergibt). Diese können nur auf bestimmte Tags angewendet werden, und hier kann ein Platzhalter nützlich sein (wenn auch selten).

Die meisten nicht kaskadierenden Stile haben auch den Wert "erben" (z. B. margin: inherit), was bedeutet, dass "die Werte des übergeordneten Tags übernommen werden".

Ich habe die vollständigen Details vergessen, aber mit dem * Selektor wird die Leistung verlangsamt, da jedes einzelne Element ausgewertet wird, wenn der Browser das CSS analysiert und den Stil anwendet. Wenn Sie die Schriftart in diesem Fall auf das übergeordnete Element setzen, wird für jedes Element eine Referenz erstellt, und zusätzliche Arbeit ist nicht erforderlich.

Es gibt auch einige andere Probleme, aber ich erinnere mich nicht an alle und habe sie seit Jahren nicht mehr verwendet.

Die allgemeine Richtlinie für ein gutes CSS-Design soll so spezifisch wie möglich sein, jedoch nicht mehr.

In Ihrem Beispiel wäre das Anwenden des Stils auf das Körperelement so spezifisch wie möglich und sicherlich spezifischer als der Selektor '*'.

Wie andere bereits erwähnt haben, body { font-family: Verdana }wird die Schriftart Verdena nur für diejenigen Elemente ausgewählt, die die Eigenschaft von ihren Eltern erben,font-style sodass auch alle Eltern die Eigenschaft erben, die letztendlich das bodyElement bilden, und * {font-family: Verdana}die Schriftart Verdena für alle Elemente auswählen . Ich möchte den Unterschied anhand eines Beispiels veranschaulichen:

Körperwähler verwenden:

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>

Universal Selelctor verwenden *:

* 
{ 
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>

Verwenden Sie die CSS- und HTML-Codes der Beispiele, bei denen Sie erkennen, dass das <input>Element den Schriftstil überhaupt nicht erbt. Daher erhält alles, was Sie in das Formular eingeben, den Standard-Schriftstil des User-Agent-Stylesheets. Im zweiten Beispiel *legt der universelle Selektor den Schriftstil für jedes Element einschließlich des inputElements explizit fest .