CSS-Stile werden nicht vererbt

CSS ist ein sehr wichtiges Werkzeug im Webdesign. Es bietet eine Vielzahl von Stilen zur Verschönerung von Webseiten und verbessert so das Benutzererlebnis der Website. Allerdings stoßen wir bei CSS manchmal auf einige schwierigere Probleme. Eines der Probleme besteht darin, dass CSS-Stile nicht vererbt werden.

Was sind CSS-Stile, die nicht vererbt werden?

Einfach ausgedrückt werden CSS-Stile nicht vererbt, wenn wir einen Stil unter einem Selektor festlegen, aber dieser Stil wird nicht in die untergeordneten Elemente des Selektors vererbt. Diese Situation macht Webdesign oft extrem schwierig. Angenommen, wir möchten eine Schriftgröße für den Haupttext der gesamten Website festlegen, aber wenn die Schriftgröße eines untergeordneten Elements unter dem Selektor bereits festgelegt wurde, erben nicht alle untergeordneten Elemente unter dem Selektor die Schriftgröße . Schriftgröße. Dies erfordert, dass wir die Schriftgröße in jedem Unterelement zurücksetzen, was sehr umständlich ist und der Codewartung nicht förderlich ist.

Gründe dafür, dass CSS-Stile nicht vererbt werden

Normalerweise werden CSS-Stile aus folgenden Gründen nicht vererbt:

1. Verwendung spezieller CSS-Eigenschaften

Einige CSS-Eigenschaften unterstützen die Vererbung nicht. Beispielsweise unterstützen CSS-Eigenschaften wie display, position, float und clear keine Vererbung. Wenn diese Attribute in einem Selektor verwendet werden, erben nicht alle untergeordneten Elemente unter dem Selektor den Stil.

2. Das untergeordnete Element erbt den Stil des übergeordneten Elements, wird jedoch geändert.

Manchmal führt das Festlegen eines neuen Stils im untergeordneten Element dazu, dass der Stil nicht mehr vom übergeordneten Element erbt. Dies liegt normalerweise daran, dass der neue Stil mit dem geerbten Stil in Konflikt steht und der geerbte Stil überschrieben wird.

3. Untergeordnete Elemente werden durch Selektorregeln als gleichrangige Elemente interpretiert.

Wenn die Selektorregel des untergeordneten Elements als gleichrangiges Element und nicht als untergeordnetes Element des übergeordneten Elements interpretiert wird, wird der Stil nicht vererbt. Wenn Sie beispielsweise + oder ~ verwenden, um gleichrangige Elemente in einem Stylesheet auszuwählen, werden diese Stile nicht vererbt.

So lösen Sie das Problem, dass CSS-Stile nicht vererbt werden

1. Verwenden Sie einen globalen Selektor

Die Verwendung eines globalen Selektors kann dazu führen, dass untergeordnete Elemente den Stil des übergeordneten Elements erben. Wie unten gezeigt:

Stil des übergeordneten Elements:

.parent-element {
  font-size: 16px;
}

Stil des untergeordneten Elements:

.child-element {
  all: initial;
  font-size: inherit;
}

Im Stil des untergeordneten Elements verwenden wir all: initial, um alle Stile auf ihre Standardwerte zurückzusetzen, und verwenden dann „font-size: inherit“, um zu erben die Schriftgröße des übergeordneten Elements.

2. Verwenden Sie CSS-Eigenschaften mit besserer Vererbung.

Einige CSS-Eigenschaften unterstützen die Vererbung. Sie können einmal vom übergeordneten Element festgelegt werden, das untergeordnete Element erbt diesen Wert jedoch automatisch. Beispielsweise unterstützen CSS-Eigenschaften wie Farbe, Schriftgröße und Schriftfamilie alle die Vererbung. Wenn wir diese Attribute im Selektor verwenden, können untergeordnete Elemente dieses Attribut erben.

3. Reduzieren Sie die Verschachtelung von Selektoren.

Durch die Vermeidung der Verschachtelung von Selektoren können Sie das Problem der Vererbung untergeordneter Elemente vermeiden. Beim Schreiben von CSS-Stilen sollten Sie versuchen, einfache Selektoren zu verwenden und eine Verschachtelung von Selektoren zu vermeiden.

4. Fügen Sie !important hinzu, wenn Stilkonflikte auftreten

In manchen Fällen können wir die Verwendung spezieller CSS-Eigenschaften oder die Verschachtelung von Selektoren nicht vermeiden. In diesem Fall können wir !important am Ende des Stils verwenden, um die Priorität des Stils sicherzustellen am höchsten und überschreibt damit andere Stile.

Zusammenfassung

In CSS können nicht vererbte Stile das Webdesign besonders umständlich machen. Solange wir jedoch einige Fähigkeiten und Methoden beherrschen, können wir dieses Problem leicht lösen. Die Verwendung globaler Selektoren, die Verwendung von CSS-Eigenschaften mit besserer Vererbung, die Reduzierung der Verschachtelung von Selektoren und die Verwendung von !important sind gängige Methoden, um das Problem der Nichtvererbung von CSS-Stilen zu lösen.

Das obige ist der detaillierte Inhalt vonCSS-Stile werden nicht vererbt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!