Wie kann CSS keine Stile erben?

So implementieren Sie CSS, das keine Stile erbt: Öffnen Sie zuerst die entsprechende Codedatei, löschen Sie dann den Stilteil, der nicht einfach zu ändern ist, und wenden Sie ihn schließlich auf kombinierte Weise an.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial“

Vererbung von CSS: Dabei werden einige Attribute für das übergeordnete Element festgelegt, und das untergeordnete Element erbt die Attribute des übergeordneten Elements. Dies ist die Vererbung in unserem CSS. Offiziell erklärt ist Vererbung eine Regel, die es ermöglicht, Stile nicht nur auf ein bestimmtes HTML-Tag-Element, sondern auch auf dessen untergeordnete Elemente anzuwenden.

Manchmal kann es problematisch sein, dass CSS den Stil des übergeordneten Elements übernimmt. Gibt es eine Möglichkeit, geerbte Stile zu löschen? Wie kann verhindert werden, dass CSS Stile erbt?

Derzeit können Stile nur durch Überschreiben gelöscht werden.

Dieses Problem sollte später beim Schreiben von CSS berücksichtigt werden Bei zwei Modulen mit geringen Unterschieden in Struktur oder Leistung ist die Verwendung der Vererbung nicht geeignet. Eine bessere Möglichkeit besteht darin, denselben Stilteil zu extrahieren, der nicht einfach zu ändern ist, und die Methode dann auf verschiedene Module anzuwenden .

Zum Beispiel können zwei Divs

<div class="a"></div>
<div class="b"></div>

gemeinsame Stile extrahieren und sie unter einer Aussage zusammenfassen:

.fixedAd {position:fixed;width:200px;height:200px;border:1px solid #ccc;}

Dann schreiben Sie Ihre eigenen Stile für verschiedene Divs:

.a {color:#ffc;background:#ccf;}
.b {color:#777;background:#999;}

Die endgültige kombinierte HTML-Struktur ist:

<div class="a fixedAd"></div>
<div class="b fixedAd"></div>

Kurz gesagt: Kombination ist besser als Vererbung. Das ist ähnlich wie beim Programmieren, haha

Das obige ist der detaillierte Inhalt vonWie kann CSS keine Stile erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!