Wie verhindert man die CSS-Vererbung in verschachtelten Menüs beim Gestalten von Elementen der obersten Ebene?

Verhindern der CSS-Vererbung in einem verschachtelten Menü

In hierarchischen Menüs können von übergeordneten Elementen geerbte Stile manchmal problematisch werden. In diesem Artikel geht es um die Verhinderung der CSS-Vererbung in einem verschachtelten Navigationsmenü, um sicherzustellen, dass nur Elemente der obersten Ebene einen bestimmten Stil haben.

Die bereitgestellte HTML-Struktur verwendet verschachtelte Listen mit einer hierarchischen Struktur. Es stellt sich die Frage, wie Stile auf Listenelemente der obersten Ebene („li“ mit der Klasse „top-level-nav“) angewendet werden können, ohne dass sich dies auf verschachtelte Unterelemente auswirkt.

Verwendung der untergeordneten Auswahl

Ein Ansatz besteht darin, den untergeordneten Selektor („>“) zu verwenden:

#parent > child

In diesem Szenario wäre dies der Fall sein:

#sidebar > .top-level-nav

Dadurch wird sichergestellt, dass Stile nur auf direkte Nachkommen des „#sidebar“-Elements angewendet werden und effektiv nur auf die Navigationselemente der obersten Ebene abzielen. Insbesondere unterstützt Internet Explorer 6 den untergeordneten Selektor nicht.

Verwendung mehrerer untergeordneter Selektoren

Alternativ können Sie mehrere untergeordnete Selektoren verwenden, um Stile für Elemente in bestimmten Tiefen anzugeben :

#parent child child

Zum Beispiel:

#sidebar child child

Dies zielt auf Elemente ab, die vorhanden sind zwei Ebenen tief in der „#sidebar“.

Codeduplizierung vermeiden

Um die Duplizierung von Stilen für Unterelemente zu vermeiden, können die vorhandenen „#sidebar ul li“-Regeln verwendet werden können so geändert werden, dass sie auf alle verschachtelten Listenelemente angewendet werden, während die spezifischen Stile für Elemente der obersten Ebene mithilfe der oben genannten untergeordneten Selektoren gezielt ausgewählt werden können.

Das obige ist der detaillierte Inhalt vonWie verhindert man die CSS-Vererbung in verschachtelten Menüs beim Gestalten von Elementen der obersten Ebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!