Heim >Web-Frontend >CSS-Tutorial >Wie verhindert man die CSS-Vererbung von übergeordneten Elementen?
Wie verhindert man die CSS-Vererbung von übergeordneten Elementen?
- Barbara StreisandOriginal
- 2024-11-26 06:47:12666Durchsuche
CSS-Vererbung und -Überschreibung
Unter bestimmten Umständen kann es notwendig sein, zu verhindern, dass ein untergeordnetes Element Stile erbt, die von seinem übergeordneten Element geerbt wurden. Es gibt zwar keine spezifische CSS-Eigenschaft, um dies zu erreichen, es ist jedoch möglich, Stiländerungen manuell rückgängig zu machen oder zusätzliche Klassen hinzuzufügen, um einen spezifischeren Stil zu definieren.
Berücksichtigen Sie beispielsweise das folgende HTML und CSS:
HTML:
<body> <div>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Unter normalen Umständen sind die Textblöcke „Inhalt des Absatzes“ und „Content of the span“ würde die Schriftgröße und -stärke vom übergeordneten „form div“-Element erben, was dazu führt, dass beide Texte fett und 12 Pixel groß sind.
Um diese Vererbung zu verhindern und den Stil nur auf „Content of“ zu beschränken Im Absatz kann man Stiländerungen manuell rückgängig machen:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
Alternativ kann, wenn möglich, das Hinzufügen zusätzlicher Klassen zum Markup für eine präzisere Darstellung sorgen Styling:
<form div.sub { color: red; }
form div div.content { /* remains green */ }
Neueste Versionen moderner Browser unterstützen jetzt die Eigenschaft „revert“, um die Vererbung für bestimmte Elemente explizit rückgängig zu machen:
div.content {
all: revert;
}
Dies ermöglicht prägnantere und flexiblere Styling-Überschreibungen.
Das obige ist der detaillierte Inhalt vonWie verhindert man die CSS-Vererbung von übergeordneten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!