Cara Menghalang Gaya CSS Awam daripada Menjejaskan Kandungan Div: Bagaimanakah \'all: initial\' Berfungsi?

Cara Mencegah Gaya CSS Awam daripada Mempengaruhi Kandungan Div

Dalam kod HTML, teg div biasanya digunakan untuk mengumpulkan elemen untuk tujuan penggayaan. Walau bagaimanapun, kadangkala perlu mengasingkan kandungan dalam teg div daripada penggayaan yang digunakan pada helaian gaya CSS awam.

Pewarisan dan Cascading CSS

Gaya CSS diwarisi oleh unsur anak daripada unsur induknya. Ini bermakna jika imej dan teg tajuk berada di dalam teg div, mereka akan mewarisi sifat CSS yang digunakan pada teg div, kecuali dalam kes tertentu.

Menyekat Warisan dengan 'semua: permulaan '

Untuk mengelakkan kandungan dalam teg div daripada dipengaruhi oleh gaya CSS awam, anda boleh menggunakan sifat CSS 'all: initial'. Sifat ini menetapkan semula semua sifat CSS yang diwarisi dan ditakrifkan kepada nilai awalnya.

Contoh Kod

Untuk mengasingkan kandungan div dalam kod HTML yang diberikan, CSS berikut boleh digunakan:

<code class="css">#mydiv {
  all: initial; /* resets inheritance for all properties */
}</code>

Membenarkan Warisan Dalam Teg Div

Sementara 'semua: permulaan' menyekat warisan, adalah mungkin untuk membenarkannya dalam teg div itu sendiri. Untuk melakukan ini, anda boleh menggunakan sifat 'all: unset' pada elemen turunan teg div:

<code class="css">#mydiv * {
  all: unset; /* allows inheritance within #mydiv */
}</code>

Sokongan Penyemak Imbas

'semua' harta trengkas disokong secara meluas dalam penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. Untuk sokongan yang lebih luas, anda boleh menggunakan versi yang lebih panjang, yang melibatkan penetapan setiap sifat CSS kepada nilai awalnya:

<code class="css">#mydiv {
  /* ... (set all CSS properties to 'initial') ... */
}</code>

Kesimpulan

Dengan menggunakan 'all: initial ' untuk menyekat warisan dan 'all: unset' untuk membenarkannya dalam div, adalah mungkin untuk mengasingkan kandungan tag div daripada helaian gaya CSS awam. Teknik ini amat berguna untuk mencipta widget atau komponen serba lengkap.

Atas ialah kandungan terperinci Cara Menghalang Gaya CSS Awam daripada Menjejaskan Kandungan Div: Bagaimanakah \'all: initial\' Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!