Wie kann man mit CSS-Selektoren nur unmittelbar untergeordnete Elemente in einer verschachtelten Liste ansprechen?

CSS-Selektor zur Identifizierung unmittelbarer untergeordneter Elemente

In CSS besteht der Zweck eines untergeordneten Selektors darin, auf Elemente abzuzielen, die die unmittelbaren Nachkommen von a sind angegebenes übergeordnetes Element. Der Selektor ul > li kann versehentlich alle li-Elemente auswählen, die Nachkommen eines ul sind, nicht nur die unmittelbaren untergeordneten Elemente.

Antwort: Verwendung der direkten untergeordneten Auswahl

Der richtige CSS-Selektor muss sichergestellt werden Es werden nur die unmittelbaren untergeordneten Elemente einer Ul anvisiert. Ist Ul > li. Dieser Selektor gibt an, dass die li-Elemente direkt von ul abstammen sollen, mit Ausnahme aller in Unterlisten verschachtelten Elemente.

Anwenden des Selektors in MooTools

Im bereitgestellten MooTools-Code , getElements() gibt alle Nachkommen zurück, einschließlich tief verschachtelter Elemente. Um dies zu beheben, sollte der Code 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++;
        });
    });
}

Zusätzliche Überlegungen

• IE6-Kompatibilität: Die > ; Selektor wird in IE6 nicht unterstützt. Eine Problemumgehung besteht darin, das folgende CSS zu verwenden:

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

• Verschachtelte Elemente: Wenn die li-Elemente weitere verschachtelte Elemente enthalten, sind möglicherweise zusätzliche Selektoren erforderlich, um bestimmte Elemente anzusprechen Unterebenen.

Fazit

Durch den Einsatz der > Selektor aktualisiert der MooTools-Code die Positionen der unmittelbar untergeordneten li-Elemente genau, wenn Elemente sortiert oder verschoben werden. Dadurch wird sichergestellt, dass die Nummerierung innerhalb der verschachtelten sortierbaren Liste korrekt ist und nur die Änderungen widerspiegelt, die an den Elementen der obersten Ebene vorgenommen wurden.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS-Selektoren nur unmittelbar untergeordnete Elemente in einer verschachtelten Liste ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!