Bagaimana untuk Mencapai Nilai Diwarisi dengan Pembolehubah CSS?

Bagaimana untuk Menyimpan Nilai Warisan Dalam Pembolehubah CSS (aka Harta Tersuai)?

Senario

Pertimbangkan kod CSS berikut:

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

Dalam kod ini, kami menggunakan --color untuk mengawal latar belakang elemen .box unsur pseudo. Walau bagaimanapun, kami mungkin menghadapi situasi di mana kami ingin mewarisi warna daripada elemen .box induk.

Cabaran Pewarisan Pembolehubah CSS

Dalam CSS, kata kunci warisan tidak disokong sebagai nilai untuk Pembolehubah CSS. Ini bermakna kita tidak boleh menetapkan secara langsung --warna untuk diwarisi untuk mencapai kesan yang kita inginkan.

Penyelesaian: Menggunakan Nilai Sandaran dan Nilai Permulaan

Untuk mengatasi had ini, kita boleh menggunakan dua teknik:

1. Menggunakan Nilai Sandaran:

Dengan menggunakan nilai sandaran dalam pembolehubah CSS, kita boleh memberitahu sifat untuk menggunakan warisan jika --color tidak ditakrifkan secara eksplisit.

background: var(--color, inherit);

Walau bagaimanapun, dalam kes ini, kerana --color sentiasa ditakrifkan pada peringkat akar dan diwarisi, nilai sandaran tidak akan pernah digunakan.

2. Menggunakan Nilai Permulaan:

Kita boleh menggunakan nilai awal untuk "menyahtakrif" --warna dan memaksa penggunaan nilai sandaran. Mengikut spesifikasi CSS, nilai awal ialah nilai kosong, yang mempunyai interaksi khas dengan var().

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

.box {
  ...
  --color: initial;
}

Dengan pengubahsuaian ini, kita boleh mencapai warisan nilai dalam pembolehubah CSS, membolehkan kita untuk mengawal warna latar belakang berdasarkan warna elemen induk.

<div class="box red">

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Nilai Diwarisi dengan Pembolehubah CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!