Bagaimanakah Saya Boleh Mencegah Pewarisan CSS dalam Elemen Bersarang?

Mencegah Pewarisan CSS dalam Elemen Bersarang

Dalam reka bentuk web, mengawal pewarisan CSS adalah penting apabila menggayakan elemen kompleks seperti menu bersarang. Mari kita mendalami cara untuk menghalang gaya daripada mengalir turun ke elemen kanak-kanak, memastikan kawalan yang tepat ke atas penampilan tapak web anda.

Pertimbangkan situasi berikut: Anda mempunyai menu navigasi bersarang dalam bar sisi anda, menggunakan senarai (< ul> dan

Anda mahu mengubah suai gaya item menu peringkat atas (.top-level-nav) tanpa menjejaskan sub-itemnya.

Menggunakan Pemilih Kanak-kanak

Satu penyelesaian ialah menggunakan pemilih kanak-kanak (>). Dengan menggunakan pemilih ini, anda boleh menyasarkan elemen anak tertentu ibu bapa tanpa menjejaskan keturunan mereka. Dalam kes ini, kod berikut akan menggunakan gaya hanya kepada kanak-kanak peringkat pertama #sidebar:

#sidebar > .top-level-nav {
  /* Styles here will only apply to top-level menu items */
}

Pendekatan ini memastikan gaya yang digunakan pada .top-level-nav tidak mengalir ke sub -tajuk (

teg) dalam senarai bersarang.

Menggunakan Pemilih Bersarang

Jika anda ingin menggunakan gaya pada elemen anak yang lebih daripada satu tahap di bawah induk, anda boleh menggunakan pemilih bersarang. Contoh berikut menyasarkan kanak-kanak dalam tahap kedua bersarang:

#sidebar .top-level-nav ul li {
  /* Styles here will only apply to sub-headings within top-level menu items */
}

Dengan menggabungkan pemilih bersarang, anda boleh membuat kawalan terperinci ke atas gaya elemen anda, memastikan gaya ibu bapa tidak diwarisi secara automatik oleh kanak-kanak .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Pewarisan CSS dalam Elemen Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!