Bagaimanakah saya boleh mengasingkan div daripada gaya CSS awam dalam HTML?

Mengasingkan div daripada Gaya CSS Awam

Dalam HTML, lata CSS dan pewarisan kadangkala boleh menjejaskan elemen dalam div yang tidak bertujuan untuk digayakan oleh peraturan CSS awam. Ini boleh mengakibatkan isu pemformatan yang tidak dijangka. Untuk menangani perkara ini, CSS Cascading and Inheritance Level 3 memperkenalkan semua sifat trengkas dan kata kunci yang tidak ditetapkan.

Menggunakan semua dan tidak ditetapkan Kata Kunci

Untuk mengelakkan teg di dalam div daripada dipengaruhi oleh gaya awam, anda boleh menetapkan semua: awal pada div dan semua: tidak ditetapkan pada keturunannya. Ini akan menyekat warisan untuk semua sifat pada div dan membenarkan warisan dalam div itu sendiri.

Contoh

Pertimbangkan HTML berikut:

<code class="html"><div id='mydiv'>
  <img src='an image source' />
  <h1>Hi it's test</h1>
</div></code>

Dan CSS berikut:

<code class="css">img {
  width:100px;
  height:100px;
}
h1 {
  font-size:26px;
  color:red;
}</code>

Tanpa mengasingkan div, imej dan tajuk di dalam div akan mewarisi gaya awam. Untuk mengasingkannya, gunakan CSS berikut:

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

Ini akan menyekat mana-mana gaya awam daripada menjejaskan elemen dalam div #mydiv sambil membenarkan mereka mewarisi gaya yang ditakrifkan dalam div itu sendiri.

Sokongan Silang Penyemak Imbas

Semua sifat disokong dalam kebanyakan penyemak imbas moden. Untuk penyemak imbas yang lebih lama, anda boleh menentukan awal secara manual untuk semua sifat CSS untuk mencapai hasil yang serupa. Walau bagaimanapun, ambil perhatian bahawa kaedah ini kurang berkesan daripada menggunakan semua harta.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengasingkan div daripada gaya CSS awam dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!