Bagaimana untuk Menghalang Pewarisan CSS dalam Menu Bersarang Semasa Menggayakan Item Peringkat Atas?

Mencegah Pewarisan CSS dalam Menu Bersarang

Dalam menu hierarki, gaya yang diwarisi daripada unsur induk kadangkala boleh menjadi masalah. Artikel ini menangani isu menghalang pewarisan CSS dalam menu navigasi bersarang, memastikan bahawa hanya item peringkat teratas mempunyai penggayaan khusus.

Struktur HTML yang disediakan menggunakan senarai bersarang dengan struktur hierarki. Timbul persoalan tentang cara menggunakan gaya pada item senarai peringkat atas ("li" dengan kelas "top-level-nav") tanpa menjejaskan subitem bersarang.

Menggunakan Pemilih Kanak-kanak

Satu pendekatan ialah menggunakan pemilih kanak-kanak (">"):

#parent > child

Dalam ini senario, ia akan menjadi:

#sidebar > .top-level-nav

Ini memastikan gaya digunakan hanya pada turunan mengarahkan elemen "#bar sisi", dengan berkesan menyasarkan item navigasi peringkat atas sahaja. Terutamanya, Internet Explorer 6 tidak menyokong pemilih kanak-kanak.

Menggunakan Berbilang Pemilih Kanak-kanak

Sebagai alternatif, anda boleh menggunakan berbilang pemilih kanak-kanak untuk menentukan gaya bagi elemen pada kedalaman tertentu :

#parent child child

Untuk contoh:

#sidebar child child

Ini menyasarkan elemen yang berada dalam dua peringkat jauh dalam "#sidebar".

Mengelakkan Penduaan Kod

Untuk mengelakkan penduaan gaya untuk sub-item, peraturan "#sidebar ul li" sedia ada boleh diubah suai untuk digunakan pada semua item senarai bersarang, manakala gaya khusus untuk item peringkat atas boleh disasarkan menggunakan pemilih kanak-kanak yang dinyatakan di atas.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Pewarisan CSS dalam Menu Bersarang Semasa Menggayakan Item Peringkat Atas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!