Comment cibler uniquement les enfants immédiats en CSS et MooTools ?

Sélecteur CSS pour cibler uniquement les enfants immédiats et non d'autres descendants identiques

Lorsque vous travaillez avec des éléments imbriqués, il est souvent nécessaire de cibler les enfants immédiats et d'exclure les autres éléments descendants qui partagent la même classe ou ID. En CSS, cela peut être difficile à réaliser.

Le sélecteur ul > li cible uniquement les enfants immédiats de

éléments, à l'exclusion des éléments
• éléments dans les sous-listes. Cela peut être utile pour styliser les éléments de liste de niveau supérieur sans affecter les éléments imbriqués. Par exemple :

  #parent > li {
    color: red;
  }

  Cependant, il est important de noter que ce sélecteur n'est pas pris en charge dans IE6. Pour maintenir la compatibilité ascendante, une solution de contournement consiste à utiliser l'approche suivante :

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

  Problème spécifique à MooTools :

  Dans le code MooTools fourni, getElementsByElelements() La méthode inclut à la fois les enfants immédiats et les descendants. Pour cibler uniquement les enfants immédiats, utilisez plutôt getChildren() :

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

  En utilisant getChildren(), vous pouvez vous assurer que la numérotation est limitée aux éléments enfants immédiats de chaque

  imbriqué, résolvant ainsi le problème. problème que vous rencontriez.

  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!