Cara Mengasingkan Div daripada Pengaruh CSS Global: Menggunakan `semua: awal` dan `semua: tidak ditetapkan`

Cara Kuarantin Div daripada Pengaruh CSS Global

Dalam kod HTML yang disediakan, kami mempunyai elemen div dengan ID "mydiv" bersarang dalam badan. Apabila menggunakan gaya CSS pada elemen seperti imej dan tajuk, kami mungkin ingin mengecualikan elemen dalam "mydiv" daripada gaya awam ini.

Kawalan Lata dan Pewarisan CSS

Tahap Pewarisan dan Pewarisan CSS 3 memperkenalkan semua sifat trengkas dan kata kunci tidak ditetapkan, memperkasakan kami untuk menyekat pewarisan dan mengasingkan elemen tertentu. Dengan menetapkan semua: awal pada elemen, kami menyekat semua warisan dan menetapkan semula semua sifat kepada nilai awalnya dengan berkesan. Ini sama seperti bermula dengan senarai yang bersih, mengabaikan mana-mana gaya yang diwarisi daripada unsur induk.

Mengasingkan "mydiv" dengan semua: awal

Untuk mengelakkan gaya yang diwarisi daripada menjejaskan unsur dalam "mydiv," kami menggunakan semua: awal pada div dan semua: tidak ditetapkan kepada keturunannya:

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

#mydiv * {
  all: unset; /* Allows inheritance within #mydiv */
}</code>

Tetapan Semula Harta Komprehensif

Sebagai alternatif, untuk memastikan keserasian merentas pelbagai penyemak imbas, kami boleh menetapkan secara manual semua sifat CSS yang diketahui (termasuk versi awalan vendor) kepada nilai awalnya:

<code class="css">#mydiv {
  /*
   * Using initial for all properties
   * to completely block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * Using inherit for normally heritable properties,
   * and initial for the others, similar to unset
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}</code>

Dengan memanfaatkan teknik ini, kami berjaya menghalang elemen dalam "mydiv" daripada mewarisi dan dipengaruhi oleh gaya CSS global, dengan itu mengasingkannya dalam persekitaran penggayaan terkapsul mereka sendiri.

Atas ialah kandungan terperinci Cara Mengasingkan Div daripada Pengaruh CSS Global: Menggunakan `semua: awal` dan `semua: tidak ditetapkan`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!