Bagaimana untuk Mencegah Pewarisan Elemen Kanak-kanak dalam CSS?

Mencegah Pewarisan Elemen Kanak-kanak dalam CSS

Dalam bidang CSS, pewarisan memainkan peranan penting dalam menentukan gaya elemen kanak-kanak berdasarkan gaya ibu bapa mereka. Walau bagaimanapun, mungkin terdapat situasi di mana anda ingin mengatasi warisan ini dan menyesuaikan gaya elemen anak secara bebas.

Isu Warisan

Pertimbangkan struktur HTML berikut:

<div>

Dengan CSS ini:

form div {font-size: 12px; font-weight: bold;}

Biasanya, blok teks "Kandungan perenggan" dan "Kandungan rentang" akan mewarisi saiz dan berat fon daripada bentuk induknya.

Mencegah Warisan

Penukaran Gaya Manual:

Satu kaedah untuk mengatasi warisan melibatkan membalikkan perubahan gaya pada elemen anak secara manual:

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

Menambah Berbilang Kelas:

Jika anda mempunyai kawalan ke atas penanda, anda boleh menambah kelas tambahan untuk menyasarkan elemen tertentu:

form div.sub {color: red;}

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

Penyelesaian Masa Depan: kembalikan Harta

Kumpulan Kerja CSS sedang meneroka sifat revert:

div.content {
  all: revert;
}

Sifat ini membolehkan anda menetapkan semula semua gaya yang diwarisi secara eksplisit pada elemen anak. Mulai April 2023, kebanyakan penyemak imbas moden (kecuali Safari dan Internet Explorer/Edge) menyokong sifat berbalik.

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