Bagaimana untuk Menyasarkan Hanya Kanak-Kanak Segera dalam Senarai Bersarang dengan Pemilih CSS?

Pemilih CSS untuk Mengenalpasti Kanak-Kanak Segera

Dalam CSS, tujuan pemilih kanak-kanak adalah untuk menyasarkan unsur-unsur yang merupakan keturunan terdekat sesuatu elemen induk yang ditentukan. Walau bagaimanapun, pemilih ul > li secara tidak sengaja boleh memilih semua elemen li yang merupakan keturunan ul, bukan hanya anak terdekat.

Jawapan: Menggunakan Pemilih Anak Segera

Pemilih CSS yang betul untuk memastikan hanya anak-anak terdekat ul yang disasarkan ialah ul > li. Pemilih ini menentukan bahawa elemen li harus diturunkan terus daripada ul, tidak termasuk sebarang elemen yang bersarang dalam subsenarai.

Menggunakan Pemilih dalam MooTools

Dalam kod MooTools yang disediakan , getElements() mengembalikan semua keturunan, termasuk elemen bersarang dalam. Untuk membetulkan perkara ini, kod tersebut hendaklah 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++;
        });
    });
}

Pertimbangan Tambahan

• Keserasian IE6: > ; pemilih tidak disokong dalam IE6. Penyelesaian adalah dengan menggunakan CSS berikut:

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

• Elemen Bersarang: Jika elemen li mengandungi elemen bersarang lagi, pemilih tambahan mungkin diperlukan untuk menyasarkan khusus subperingkat.

Kesimpulan

Dengan menggunakan > pemilih, kod MooTools akan mengemas kini kedudukan elemen kanak-kanak segera dengan tepat apabila item diisih atau dialihkan. Ini memastikan penomboran dalam senarai boleh diisih bersarang adalah betul dan hanya mencerminkan perubahan yang dibuat pada elemen peringkat teratas.

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan Hanya Kanak-Kanak Segera dalam Senarai Bersarang dengan Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!