CSS と MooTools で直接の子のみをターゲットにする方法は?

他の同一の子孫ではなく直接の子のみをターゲットにするための CSS セレクター

ネストされた要素を操作する場合、多くの場合、直接の子をターゲットにし、共有する他の子孫要素を除外することが必要になります。同じクラスまたは ID。 CSS では、これを達成するのは難しい場合があります。

セレクター ul > li は、

の直接の子のみをターゲットにします。要素 (ネストされた
• を除く)サブリスト内の要素。これは、ネストされた項目には影響を与えずに、最上位のリスト項目をスタイル設定する場合に便利です。例:

  #parent > li {
    color: red;
  }

  ただし、このセレクターは IE6 ではサポートされていないことに注意してください。下位互換性を維持するための回避策は、次のアプローチを使用することです:

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

  MooTools 固有の問題:

  提供された MooTools コードでは、getElementsByElements()メソッドには直接の子と子孫の両方が含まれます。直接の子のみを対象にするには、代わりに 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++;
          });
      });
  }

  getChildren() を使用すると、番号付けがネストされた各

  の直接の子要素に限定されるようになり、発生した問題。

  以上がCSS と MooTools で直接の子のみをターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。