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!