Cara Menyasarkan Kanak-Kanak Terdekat sahaja dengan Pemilih CSS: Panduan Komprehensif

Cara Menyasarkan Hanya Kanak-kanak Segera dengan Pemilih CSS

Apabila bekerja dengan elemen bersarang, ia boleh mencabar untuk menggayakan hanya kanak-kanak terdekat dan mengecualikan semua keturunan. Pemilih CSS tradisional seperti ul > li dan #ibubapa > li akan memasukkan semua elemen kanak-kanak, tanpa mengira tahap bersarangnya.

Pemilih Anak Segera dalam CSS

Pemilih anak segera > boleh digunakan untuk menyasarkan hanya anak peringkat pertama unsur induk. Contohnya, untuk menyasarkan item senarai peringkat atas sahaja dalam senarai boleh diisih bersarang anda, anda boleh menggunakan pemilih berikut:

#parent > li

Nota: Pemilih ini tidak disokong dalam IE6.

Penyelesaian untuk IE6

Untuk keserasian ke belakang dengan IE6, anda boleh menggunakan hack CSS berikut:

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

MooTools-Specific Penyelesaian

Dalam kod berasaskan MooTools anda, isu timbul kerana getElements() mendapatkan semula semua keturunan dan bukannya hanya anak terdekat. Untuk membetulkan perkara ini, anda boleh menggunakan getChildren() sebaliknya:

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

Dengan menggunakan getChildren(), anda boleh memastikan bahawa teks kedudukan dikemas kini dengan betul hanya untuk anak terdekat setiap senarai bersarang.

Atas ialah kandungan terperinci Cara Menyasarkan Kanak-Kanak Terdekat sahaja dengan Pemilih CSS: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!