Bolehkah anda menghalang gaya CSS daripada diwarisi daripada elemen induk?

Menghalang Elemen Kanak-kanak daripada Mewarisi Gaya Ibu Bapa dalam CSS

Masalah:

Adakah terdapat cara untuk menghalang sifat CSS yang diisytiharkan pada elemen induk daripada diwarisi oleh elemen anak mereka? Sebagai contoh, jika elemen induk mempunyai saiz fon 12px, bolehkah anda menghalang elemen anaknya daripada mewarisi gaya ini?

Jawapan:

Malangnya, terdapat tiada harta CSS mudah yang membolehkan anda menghalang pewarisan daripada unsur induk. Walau bagaimanapun, terdapat beberapa penyelesaian yang boleh dilaksanakan:

1. Kembalikan Perubahan Gaya Secara Manual:

   Anda boleh mengatasi gaya yang diwarisi dengan menetapkan secara eksplisit gaya yang diingini pada elemen kanak-kanak. Contohnya:

   div { color: green; }
   
   form div { color: red; }
   
   form div div.content { color: green; }

   Salin selepas log masuk

2. Tambah Berbilang Kelas pada Penanda:

   Jika anda mempunyai akses kepada penanda HTML, anda boleh menambah berbilang kelas kepada elemen untuk menyasarkan penggayaan tertentu. Ini membolehkan anda mengatasi gaya daripada kelas yang diwarisi:

   form div.sub { color: red; }
   
   form div div.content { /* remains green */ }

   Salin selepas log masuk

3. Gunakan semua: kembalikan Harta (Percubaan):

   Kumpulan Kerja CSS telah mencadangkan semua: kembalikan harta, yang menetapkan semula semua gaya pada elemen kepada nilai awalnya. Ini boleh digunakan untuk menghalang pewarisan daripada unsur induk:

   div.content {
     all: revert;
   }

   Salin selepas log masuk

   Perhatikan bahawa sifat ini masih percubaan dan mungkin tidak disokong oleh semua penyemak imbas.

Atas ialah kandungan terperinci Bolehkah anda menghalang gaya CSS daripada diwarisi daripada elemen induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!