Wie verhindert man die Vererbung untergeordneter Elemente in CSS?

Verhindern der Vererbung untergeordneter Elemente in CSS

Im Bereich CSS spielt die Vererbung eine entscheidende Rolle bei der Definition der Stile untergeordneter Elemente basierend auf denen ihrer übergeordneten Elemente. Es kann jedoch Situationen geben, in denen Sie diese Vererbung überschreiben und die Stile untergeordneter Elemente unabhängig anpassen möchten.

Vererbungsproblem

Bedenken Sie die folgende HTML-Struktur:

<div>

Mit diesem CSS:

form div {font-size: 12px; font-weight: bold;}

Normalerweise werden die Textblöcke „Inhalt des Absatzes“ und „Inhalt von the span“ würde die Schriftgröße und -stärke von ihrem übergeordneten Formular erben.

Vererbung verhindern

Manuelle Stilumkehr:

Eine Methode zum Überschreiben der Vererbung beinhaltet das manuelle Zurücksetzen der Stiländerungen am untergeordneten Element:

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

Hinzufügen Mehrere Klassen:

Wenn Sie die Kontrolle über das Markup haben, können Sie zusätzliche Klassen hinzufügen, um auf bestimmte Elemente abzuzielen:

form div.sub {color: red;}

form div div.content {/* Remains green */}

Zukünftige Lösung: Eigenschaft zurücksetzen

Die CSS-Arbeitsgruppe untersucht derzeit die Revert-Eigenschaft:

div.content {
  all: revert;
}

Mit dieser Eigenschaft können Sie alle geerbten Stile eines untergeordneten Elements explizit zurücksetzen Element. Ab April 2023 unterstützen die meisten modernen Browser (außer Safari und Internet Explorer/Edge) die Revert-Eigenschaft.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Vererbung untergeordneter Elemente in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!