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!