Können Sie verhindern, dass untergeordnete Elemente übergeordnete CSS-Stile erben?

Verhindern, dass untergeordnete Elemente übergeordnetes CSS erben

Ursprüngliche Anfrage

Kann CSS geändert werden, um die Vererbung von Stilen zu verhindern? Elternelemente zu untergeordneten Elementen?

Umfassende Antwort

Leider gibt es keine einfache CSS-Eigenschaft, die verhindern kann, dass untergeordnete Elemente Stile von ihren Eltern erben. Mit der Eigenschaft „inherit“ können Sie Werte von übergeordneten zu untergeordneten Elementen kopieren, es gibt jedoch keine Entsprechung für die entgegengesetzte Richtung.

Alternative Lösungen

Um die geerbten Stile zu überschreiben, Sie müssen sie manuell im CSS-Code zurücksetzen:

div {
  color: green;
}

form div {
  color: red;
}

form div div.content {
  color: green;
}

Alternativ können Sie, wenn Sie die Kontrolle über das Markup haben, zusätzliche Klassen verwenden, um auf bestimmte Elemente abzuzielen:

form div.sub {
  color: red;
}

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

Zukünftige Möglichkeiten

Die CSS-Arbeitsgruppe sucht nach einer Lösung für dieses Problem. Mit der vorgeschlagenen Eigenschaft „revert“ können Sie geerbte Stile zurücksetzen und zum eigenen berechneten Stil des Elements zurückkehren:

div.content {
  all: revert;
}

Seit März 2015 ist diese Eigenschaft in allen gängigen Browsern außer Safari und IE implementiert. Rand. Allerdings wurde der Eigenschaftsname inzwischen in „revert“ geändert.

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