Wie kann man in CSS und MooTools nur unmittelbare Kinder ansprechen?

CSS-Selektor für die Ausrichtung nur auf unmittelbare Kinder und nicht auf andere identische Nachkommen

Bei der Arbeit mit verschachtelten Elementen ist es oft notwendig, auf unmittelbare Kinder abzuzielen und andere Nachkommenelemente auszuschließen, die diese Elemente gemeinsam haben die gleiche Klasse oder ID. In CSS kann dies eine Herausforderung sein.

Der Selektor ul > li zielt nur auf die unmittelbaren untergeordneten Elemente von

ab. Elemente, mit Ausnahme aller verschachtelten
• Elemente innerhalb von Unterlisten. Dies kann nützlich sein, um die Listenelemente der obersten Ebene zu formatieren, während verschachtelte Elemente davon unberührt bleiben. Zum Beispiel:

  #parent > li {
    color: red;
  }

  Es ist jedoch wichtig zu beachten, dass dieser Selektor in IE6 nicht unterstützt wird. Um die Abwärtskompatibilität aufrechtzuerhalten, besteht eine Problemumgehung darin, den folgenden Ansatz zu verwenden:

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

  MooTools-spezifisches Problem:

  In Ihrem bereitgestellten MooTools-Code ist getElementsByElelements() Die Methode umfasst sowohl unmittelbare Kinder als auch Nachkommen. Um nur unmittelbar untergeordnete Elemente anzusprechen, verwenden Sie stattdessen 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++;
          });
      });
  }

  Durch die Verwendung von getChildren() können Sie sicherstellen, dass die Nummerierung auf die unmittelbar untergeordneten Elemente jedes verschachtelten

  beschränkt ist, wodurch das aufgelöst wird Problem, auf das Sie gestoßen sind.

  Das obige ist der detaillierte Inhalt vonWie kann man in CSS und MooTools nur unmittelbare Kinder ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!