Bagaimana untuk Mengekalkan Kelegapan dalam Elemen Kanak-kanak Semasa Menggunakan Kelegapan kepada Induk?

Memelihara Kelegapan dalam Elemen Kanak-kanak semasa Memohon kepada Induk

Apabila menggunakan kelegapan pada elemen induk, sifat kelegapan diwarisi oleh elemen anaknya . Walau bagaimanapun, dalam senario tertentu, adalah wajar untuk "membatalkan" kelegapan yang diwarisi ini untuk elemen anak tertentu.

Warisan kelegapan ialah tingkah laku asas HTML dan CSS. Jika kelegapan elemen kanak-kanak ditetapkan kepada 1, ia akan sentiasa mewarisi kelegapan induknya, walaupun terdapat sebarang pengisytiharan kelegapan berikutnya pada kanak-kanak itu.

Penyelesaian

Walaupun tidak mungkin untuk membatalkan sepenuhnya kelegapan yang diwarisi, terdapat pendekatan alternatif yang boleh mencapai kesan yang sama.

• Pindahkan Elemen Anak خارج من الوالد: Dengan mengalih keluar elemen anak daripada hierarki DOM ibu bapa, ia tidak akan mewarisi kelegapan ibu bapa lagi.
• Gunakan Warna RGBa: Daripada menggunakan kelegapan, gunakan warna rgba untuk latar belakang, jidar atau teks elemen induk . Warna RGBA membenarkan spesifikasi ketelusan tanpa menjejaskan kelegapan elemen kanak-kanak.

Contoh

Pertimbangkan kod berikut:

<code class="html"><div class="parent">
  <div class="child"></div>
</div></code>

<code class="css">.parent {
  opacity: 0.6;
}</code>

Dalam contoh ini, elemen anak akan mewarisi kelegapan ibu bapa sebanyak 0.6.

Untuk "membatalkan" warisan ini, anda boleh menggunakan warna rgba untuk latar belakang ibu bapa:

<code class="css">.parent {
  background-color: rgba(255, 165, 0, 0.6);
}</code>

Ini akan menghasilkan latar belakang separa telus untuk induk, tetapi elemen anak akan kekal legap sepenuhnya.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Kelegapan dalam Elemen Kanak-kanak Semasa Menggunakan Kelegapan kepada Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!