Bolehkah Anda Menghalang Elemen Anak daripada Mewarisi Gaya CSS Induk?

Mencegah Elemen Anak daripada Mewarisi CSS Induk

Siasatan Asal

Bolehkah CSS diubah suai untuk mengelakkan pewarisan gaya daripada elemen ibu bapa kepada anak elemen?

Jawapan Komprehensif

Malangnya, tiada sifat CSS mudah yang boleh menghalang elemen kanak-kanak daripada mewarisi gaya daripada ibu bapa mereka. Harta warisan membolehkan anda menyalin nilai daripada unsur induk kepada anak, tetapi tiada persamaan untuk arah yang bertentangan.

Penyelesaian Alternatif

Untuk mengatasi gaya yang diwarisi, anda mesti mengembalikannya secara manual dalam kod CSS:

div {
  color: green;
}

form div {
  color: red;
}

form div div.content {
  color: green;
}

Sebagai alternatif, jika anda mempunyai kawalan ke atas penanda, anda boleh menggunakan kelas tambahan untuk menyasarkan elemen tertentu:

form div.sub {
  color: red;
}

form div div.content {
  /* remains green */
}

Kemungkinan Masa Depan

Kumpulan Kerja CSS sedang meneroka penyelesaian kepada isu ini . Sifat yang dicadangkan, berbalik, akan membolehkan anda menetapkan semula gaya yang diwarisi dan kembali kepada gaya pengiraan elemen itu sendiri:

div.content {
  all: revert;
}

Sehingga Mac 2015, sifat ini telah dilaksanakan dalam semua penyemak imbas utama kecuali Safari dan IE/ Tepi. Walau bagaimanapun, nama harta itu telah ditukar kepada kembali.

Atas ialah kandungan terperinci Bolehkah Anda Menghalang Elemen Anak daripada Mewarisi Gaya CSS Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!