Bagaimanakah anda boleh mengasingkan bekas `div` daripada gaya CSS awam dan menghalang anak-anaknya daripada mewarisi gaya global?

Mengasingkan Div daripada Gaya CSS Awam

Masalah

Pertimbangkan kod HTML berikut:

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

Menggunakan perkara berikut Lembaran gaya CSS:

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

Timbul persoalan: bagaimana kita boleh menghalang penggayaan yang ditakrifkan untuk semua dan

teg daripada menjejaskan elemen dalam bekas #mydiv?

Penyelesaian

Untuk mengasingkan elemen dalam #mydiv daripada gaya CSS global, kami boleh memanfaatkan semua sifat trengkas dan kata kunci yang tidak ditetapkan yang diperkenalkan dalam Cascading CSS dan Tahap Warisan 3.

Dengan menetapkan semua: inisial pada #mydiv, kami menyekat warisan untuk semua sifat dan menetapkannya semula kepada nilai lalainya. Ini menghalang gaya global daripada melata ke dalam bekas.

Untuk membenarkan warisan dalam #mydiv, kita boleh menetapkan semua: tidak ditetapkan pada keturunannya. Dengan berbuat demikian, kami membolehkan peraturan yang ditakrifkan dalam bekas berkuat kuasa tanpa gangguan daripada gaya luaran.

Berikut ialah kod CSS yang disemak:

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

Adalah penting untuk ambil perhatian bahawa teknik ini digunakan pada semua sifat CSS yang mungkin, termasuk sifat awalan vendor. Untuk memastikan sokongan penyemak imbas yang luas, adalah disyorkan untuk menyasarkan elemen pseudo juga:

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

Pendekatan Alternatif

Sebagai alternatif, untuk keserasian penyemak imbas yang lebih luas, anda boleh menetapkan setiap sifat CSS secara manual kepada asalnya nilai pada #mydiv dan untuk diwarisi pada keturunannya, seperti yang dilihat dalam kod berikut:

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

Sokongan Penyemak Imbas

Semua sifat trengkas disokong dalam penyemak imbas berikut:

• Chrome 37
• Firefox 27
• Safari 9.1
• Edge 79
• Opera 24

>

Atas ialah kandungan terperinci Bagaimanakah anda boleh mengasingkan bekas `div` daripada gaya CSS awam dan menghalang anak-anaknya daripada mewarisi gaya global?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!