Heim > Artikel > Web-Frontend > So erreichen Sie mit CSS-Selektoren nur junge Kinder: Eine umfassende Anleitung
So zielen Sie mit CSS-Selektoren nur auf unmittelbar untergeordnete Elemente ab
Bei der Arbeit mit verschachtelten Elementen kann es schwierig sein, nur die unmittelbar untergeordneten Elemente zu formatieren alle Nachkommen ausschließen. Herkömmliche CSS-Selektoren wie ul > li und #parent > li schließt alle untergeordneten Elemente ein, unabhängig von ihrer Verschachtelungsebene.
Sofortige untergeordnete Auswahl in CSS
Die unmittelbare untergeordnete Auswahl > kann verwendet werden, um nur auf die untergeordneten Elemente der ersten Ebene eines übergeordneten Elements abzuzielen. Um beispielsweise nur die Listenelemente der obersten Ebene in Ihrer verschachtelten sortierbaren Liste anzusprechen, können Sie den folgenden Selektor verwenden:
#parent > li
Hinweis: Dieser Selektor wird in IE6 nicht unterstützt.
Problemumgehung für IE6
Für die Abwärtskompatibilität mit IE6 können Sie verwenden der folgende CSS-Hack:
#parent li { /* your styles for immediate children */ } #parent li li { /* reset styles for descendants */ }
MooTools-spezifische Lösung
In Ihrem MooTools-basierten Code tritt das Problem auf, weil getElements() alle Nachkommen abruft und nicht nur unmittelbare Kinder. Um dies zu beheben, können Sie stattdessen getChildren() verwenden:
var drop = function(el){ el.getParents('ul').reverse().each(function(item){ var posCount = 1; item.getChildren("li").getElements("a span[class=position]").each(function(pos){ pos.set('text', posCount); posCount++; }); }); };
Durch die Verwendung von getChildren() können Sie sicherstellen, dass der Positionstext nur für die unmittelbaren untergeordneten Elemente jeder verschachtelten Liste korrekt aktualisiert wird.
Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit CSS-Selektoren nur junge Kinder: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!