Können Sie verhindern, dass CSS-Stile von übergeordneten Elementen erben?

Verhindern, dass untergeordnete Elemente übergeordnete Stile in CSS erben

Problem:

Gibt es ein Wie kann verhindert werden, dass für übergeordnete Elemente deklarierte CSS-Eigenschaften von deren untergeordneten Elementen geerbt werden? Wenn ein übergeordnetes Element beispielsweise eine Schriftgröße von 12 Pixel hat, können Sie dann verhindern, dass seine untergeordneten Elemente diesen Stil erben?

Antwort:

Leider gibt es einen Keine einfache CSS-Eigenschaft, mit der Sie die Vererbung von übergeordneten Elementen verhindern können. Es gibt jedoch mehrere Problemumgehungen, die implementiert werden können:

1. Stiländerungen manuell zurücksetzen:

   Sie können den geerbten Stil überschreiben, indem Sie explizit festlegen gewünschten Stil für das untergeordnete Element. Zum Beispiel:

   div { color: green; }
   
   form div { color: red; }
   
   form div div.content { color: green; }

2. Mehrere Klassen zum Markup hinzufügen:

   Wenn Sie Zugriff auf das HTML-Markup haben, können Sie mehrere hinzufügen Klassen zu einem Element hinzufügen, um auf einen bestimmten Stil abzuzielen. Dadurch können Sie Stile aus geerbten Klassen überschreiben:

   form div.sub { color: red; }
   
   form div div.content { /* remains green */ }

3. Verwenden Sie die all: revert-Eigenschaft (experimentell):

   CSS-Arbeitsgruppe hat die Eigenschaft all:revert vorgeschlagen, die alle Stile eines Elements auf ihre Anfangswerte zurücksetzt. Dies kann verwendet werden, um die Vererbung von übergeordneten Elementen zu verhindern:

   div.content {
     all: revert;
   }

   Beachten Sie, dass diese Eigenschaft noch experimentell ist und möglicherweise nicht von allen Browsern unterstützt wird.

Das obige ist der detaillierte Inhalt vonKönnen Sie verhindern, dass CSS-Stile von übergeordneten Elementen erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!