Wie verhindert man die CSS-Vererbung von übergeordneten Elementen?-CSS-Tutorial-php.cn

Wie verhindert man die CSS-Vererbung von übergeordneten Elementen?

Barbara Streisand

Freigeben： 2024-11-26 06:47:12

Original

557 Leute haben es durchsucht

How to Prevent CSS Inheritance from Parent Elements?

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>

Nach dem Login kopieren

CSS:

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Nach dem Login kopieren

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; }

Nach dem Login kopieren

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 */ }

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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!