Comment cibler uniquement les enfants immédiats dans une liste imbriquée avec des sélecteurs CSS ?

Sélecteur CSS pour identifier les enfants immédiats

En CSS, le but d'un sélecteur d'enfant est de cibler les éléments qui sont les descendants immédiats d'un élément parent spécifié. Cependant, le sélecteur ul > li peut sélectionner par inadvertance tous les éléments li qui sont les descendants d'un ul, pas seulement les enfants immédiats.

Réponse : Utilisation du sélecteur d'enfant immédiat

Le sélecteur CSS correct pour garantir seuls les enfants immédiats d'un ul sont ciblés est ul > li. Ce sélecteur spécifie que les éléments li doivent descendre directement de l'ul, à l'exclusion de tous les éléments imbriqués dans des sous-listes.

Application du sélecteur dans MooTools

Dans le code MooTools fourni , getElements() renvoie tous les descendants, y compris les éléments profondément imbriqués. Pour remédier à cela, le code doit utiliser getChildren() à la place :

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++;
        });
    });
}

Considérations supplémentaires

• Compatibilité IE6 : Le > ; le sélecteur n’est pas pris en charge dans IE6. Une solution de contournement consiste à utiliser le CSS suivant :

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

• Éléments imbriqués : Si les éléments li contiennent d'autres éléments imbriqués, des sélecteurs supplémentaires peuvent être nécessaires pour cibler des éléments spécifiques. sous-niveaux.

Conclusion

En employant le > sélecteur, le code MooTools mettra à jour avec précision les positions des éléments li enfants immédiats lorsque les éléments sont triés ou déplacés. Cela garantit que la numérotation dans la liste triable imbriquée est correcte et reflète uniquement les modifications apportées aux éléments de niveau supérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!