Bagaimanakah saya boleh menyimpan nilai yang diwarisi dalam pembolehubah CSS?

Mewarisi Nilai dalam Pembolehubah CSS

Dalam bidang CSS, sifat tersuai, juga dikenali sebagai pembolehubah CSS, menawarkan fleksibiliti yang besar dan kawalan ke atas gaya. Soalan biasa timbul apabila kita ingin menyimpan nilai yang diwarisi dalam pembolehubah. Mari kita selami penyelesaiannya.

Cabaran

Pertimbangkan kod berikut:

:root {
  --color:rgba(20,20,20,0.5);
}

.box {
  --color: inherit;
  background: var(--color);
}

Di sini, kami menyasarkan untuk mewarisi latar belakang warna daripada unsur :root. Walau bagaimanapun, penggunaan warisan sebagai nilai --warna tidak berfungsi kerana peraturan pewarisan.

Penyelesaian: Nilai Sandaran dan Kata Kunci Awal

Untuk menyimpan nilai yang diwarisi , kita boleh memanfaatkan ciri nilai sandaran pembolehubah CSS. Kita boleh menetapkan:

background: var(--color, inherit);

Ini memberitahu penyemak imbas untuk menggunakan inherit jika --color tidak ditakrifkan. Walau bagaimanapun, memandangkan --color sentiasa ditakrifkan pada tahap :root, ia tidak akan menggunakan sandaran.

Untuk mengatasinya, kita boleh menetapkan semula --color kepada nilai awalnya menggunakan kata kunci awal:

.box {
  --color: initial;
  background: var(--color, inherit);
}

Penggunaan awal dengan berkesan membatalkan tetapan harta tersuai, membolehkan warisan berkuat kuasa. Kod ini akan berjaya mewarisi warna daripada unsur :root.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyimpan nilai yang diwarisi dalam pembolehubah CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!