Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencegah Pewarisan CSS daripada Elemen Induk?

Bagaimana untuk Mencegah Pewarisan CSS daripada Elemen Induk?

Barbara Streisandasal: 2024-11-26 06:47:12639semak imbas

How to Prevent CSS Inheritance from Parent Elements?

Pewarisan dan Penggantian CSS

Dalam keadaan tertentu, elemen anak mungkin perlu dihalang daripada mewarisi gaya yang diwarisi daripada elemen induknya. Walaupun tiada sifat CSS khusus untuk mencapai ini, adalah mungkin untuk mengembalikan perubahan gaya secara manual atau menambah kelas tambahan untuk menentukan penggayaan yang lebih khusus.

Sebagai contoh, pertimbangkan HTML dan CSS berikut:

HTML:

<body>
 <div>

CSS:

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Dalam keadaan biasa, teks menyekat "Kandungan perenggan" dan "Kandungan rentang" akan mewarisi saiz dan berat fon daripada elemen "form div" induk, menyebabkan kedua-dua teks menjadi tebal dan 12px.

Untuk mengelakkan pewarisan dan had ini penggayaan kepada hanya "Kandungan perenggan", seseorang boleh mengembalikan perubahan gaya secara manual:

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

Sebagai alternatif, jika mungkin, menambah kelas tambahan pada penanda boleh memberikan penggayaan yang lebih tepat:

<form div.sub { color: red; }

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

Versi terkini penyemak imbas moden kini menyokong sifat "revert" untuk mengembalikan warisan secara eksplisit pada elemen tertentu:

div.content {
  all: revert;
}

Ini membolehkan penggantian penggayaan yang lebih ringkas dan fleksibel.

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

css html define if for while Property this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bolehkah CSS `:before` dan `:after` Pseudo-elements Style Inline SVGs?Artikel seterusnya：Bolehkah CSS `:before` dan `:after` Pseudo-elements Style Inline SVGs?

Artikel berkaitan

Lihat lagi