Wie unterscheiden sich „html', „body' und der Universal Selector bei der Gestaltung von HTML-Elementen?

Überprüfen der Unterschiede beim Stylen von HTML-Elementen mit HTML, Body und dem Universal Selector

Wenn man sich mit CSS-Selektoren befasst, kann man auf Diskrepanzen stoßen ihr Verhalten, wenn sie auf dasselbe HTML-Dokument angewendet werden. Um diese Unterschiede zu untersuchen, untersuchen wir die folgenden Szenarien:

1. HTML-Selektor:

html {
  color: black;
  background-color: white;
}

Dieser Selektor legt Stile für das äußerste HTML-Element fest. Alle seine Nachkommen erben seine Farbeigenschaft und schwarzen Text, einschließlich des Körperelements. Die Eigenschaft „Hintergrundfarbe“ wird jedoch nicht vererbt, sodass der standardmäßige transparente Hintergrund des Körperelements sichtbar bleibt, sofern nicht ausdrücklich etwas anderes festgelegt wird. Bemerkenswert ist, dass die Hintergrundfarbe des HTML-Elements das Ansichtsfenster ausfüllt, auch wenn es nicht seine volle Höhe ausdehnt.

2. Body-Selektor:

body {
  color: black;
  background-color: white;
}

Das Anwenden von Stilen auf das Body-Element wirkt sich direkt auf alle seine Nachkommen aus. Wie zuvor erben alle Elemente die Farbeigenschaft. Darüber hinaus wird die Hintergrundfarbe des Body-Elements an das HTML-Element weitergegeben, bis ein Hintergrund für HTML definiert wird. Folglich macht es in den meisten Fällen kaum einen praktischen Unterschied, ob die erste oder die zweite Regel für die Hintergrundgestaltung verwendet wird.

3. Universeller Selektor (*):

* {
  color: black;
  background-color: white;
}

Der universelle Selektor wirkt sich auf jedes Element aus und unterbricht die Vererbungskette für Farbe und Hintergrundfarbe. Diese Regel kann durch spezifischere Selektoren außer Kraft gesetzt werden. Während seine Verwendung für bestimmte Szenarien nützlich sein kann, wird im Allgemeinen davon abgeraten, die Vererbung über den universellen Selektor zu unterbrechen, sofern dies nicht unbedingt erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich „html', „body' und der Universal Selector bei der Gestaltung von HTML-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!