Bagaimana untuk Mencegah Pewarisan CSS dalam Menu Hierarki?

Mencegah Pewarisan CSS dalam Menu Hierarki

Dalam CSS, warisan merujuk kepada gaya yang diturunkan daripada elemen induk kepada elemen anak. Walaupun warisan secara amnya diingini, ia boleh menjadi masalah apabila anda ingin mengubah suai gaya untuk tahap tertentu dalam hierarki bersarang. Satu senario sedemikian timbul dalam menu navigasi hierarki di mana item peringkat teratas memerlukan penggayaan tersuai tanpa menjejaskan sub-item.

Menggunakan Pemilih Anak

Satu pendekatan untuk mencegah pewarisan ialah untuk menggunakan pemilih anak (>). Peraturan CSS berikut hanya menyasarkan anak terdekat bagi elemen ul #sidebar:

#sidebar > ul li {
  /* styles that will not be inherited by sub-list items */
}

Walau bagaimanapun, kaedah ini mungkin tidak sesuai jika anda mempunyai berbilang peringkat senarai bersarang.

Menggunakan Kelas Tertentu

Penyelesaian alternatif melibatkan penggunaan kelas khusus untuk item senarai peringkat teratas. Dalam HTML berikut, setiap item senarai peringkat atas mempunyai kelas "top-level-nav":

<ul>

Anda kemudian boleh menyasarkan item peringkat atas dengan CSS berikut:

#sidebar .top-level-nav {
  /* styles that will not be inherited */
}

Kaedah ini memastikan gaya yang digunakan pada kelas .top-level-nav tidak akan turun ke sub-item. Ambil perhatian bahawa jika tema pra-dibuat termasuk gaya khusus untuk item subsenarai, anda perlu mengatasi gaya tersebut. Ini boleh dilakukan dengan mengisytiharkan gaya untuk #sidebar .top-level-nav dengan kekhususan yang lebih besar atau menggunakan pemilih tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pewarisan CSS dalam Menu Hierarki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!