CSS セレクターを使用してネストされたリストの直接の子のみをターゲットにする方法

直接の子を識別するための CSS セレクター

CSS では、子セレクターの目的は、子セレクターの直接の子孫である要素をターゲットにすることです。指定された親要素。ただし、セレクター ul > li は、直接の子だけでなく、ul の子孫であるすべての li 要素を誤って選択してしまう可能性があります。

答え: 直接の子セレクターを使用する

確実に行うための正しい CSS セレクターul > の場合、ul の直接の子のみが対象となります。リー。このセレクターは、サブリスト内にネストされた要素を除き、li 要素が ul から直接派生する必要があることを指定します。

MooTools でのセレクターの適用

提供された MooTools コード内、getElements() は、深くネストされた要素を含むすべての子孫を返します。これを修正するには、コードで代わりに 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++;
        });
    });
}

追加の考慮事項

• IE6 互換性: > ;セレクターは IE6 ではサポートされていません。回避策は、次の CSS を使用することです:

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

• ネストされた要素: li 要素にさらにネストされた要素が含まれる場合、特定のターゲットをターゲットにするために追加のセレクターが必要になる場合があります。

結論

> を使用することで、セレクターを使用すると、項目が並べ替えられたり移動されたりするときに、MooTools コードは直接の子の li 要素の位置を正確に更新します。これにより、ネストされた並べ替え可能なリスト内の番号付けが正しくなり、最上位の要素に加えられた変更のみが反映されることが保証されます。

以上がCSS セレクターを使用してネストされたリストの直接の子のみをターゲットにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。