CSS セレクターを使用して直接の子のみをターゲットにする方法: 包括的なガイド

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

ネストされた要素を操作する場合、直接の子だけをスタイル設定するのは難しい場合があります。すべての子孫を除外します。 ul > のような従来の CSS セレクターli と #parent > li には、ネスト レベルに関係なく、すべての子要素が含まれます。

CSS の直接の子セレクター

直接の子セレクター >親要素の第 1 レベルの子のみをターゲットにするために使用できます。たとえば、ネストされた並べ替え可能なリストの最上位のリスト項目のみをターゲットにするには、次のセレクターを使用できます:

#parent > li

注: このセレクターは IE6 ではサポートされていません。

IE6 の回避策

下位互換性のためIE6 では、次の CSS ハックを使用できます。

#parent li { /* your styles for immediate children */ }
#parent li li { /* reset styles for descendants */ }

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

getChildren() を使用すると、各ネストされたリストの直接の子に対してのみ位置テキストが正しく更新されるようにできます。

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