Wie verhindert man die CSS-Vererbung in hierarchischen Menüs?

Verhindern der CSS-Vererbung in hierarchischen Menüs

In CSS bezieht sich Vererbung auf Stile, die von übergeordneten Elementen an untergeordnete Elemente weitergegeben werden. Während Vererbung im Allgemeinen wünschenswert ist, kann sie problematisch sein, wenn Sie Stile für bestimmte Ebenen in einer verschachtelten Hierarchie ändern möchten. Ein solches Szenario entsteht in hierarchischen Navigationsmenüs, in denen Elemente der obersten Ebene benutzerdefiniertes Design benötigen, ohne dass sich dies auf Unterelemente auswirkt.

Verwendung der untergeordneten Auswahl

Ein Ansatz zur Verhinderung der Vererbung ist um die untergeordnete Auswahl zu verwenden (>). Die folgende CSS-Regel zielt nur auf die unmittelbaren untergeordneten Elemente des #sidebar ul-Elements ab:

#sidebar > ul li {
  /* styles that will not be inherited by sub-list items */
}

Diese Methode ist jedoch möglicherweise nicht geeignet, wenn Sie mehrere Ebenen verschachtelter Listen haben.

Verwenden spezifischer Klassen

Eine alternative Lösung besteht darin, spezifische Klassen für die Listenelemente der obersten Ebene zu verwenden. Im folgenden HTML hat jedes Listenelement der obersten Ebene die Klasse „top-level-nav“:

<ul>

Sie können dann die Elemente der obersten Ebene mit dem folgenden CSS gezielt ansprechen:

#sidebar .top-level-nav {
  /* styles that will not be inherited */
}

Diese Methode stellt sicher, dass die auf die Klasse .top-level-nav angewendeten Stile nicht auf die Unterelemente übertragen werden. Beachten Sie, dass Sie diese Stile überschreiben müssten, wenn das vorgefertigte Design bestimmte Stile für Unterlistenelemente enthalten würde. Dies kann erreicht werden, indem die Stile für #sidebar .top-level-nav mit einer größeren Spezifität deklariert werden oder zusätzliche Selektoren verwendet werden.

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