Bolehkah Kami Menggunakan Sifat Tersuai CSS untuk Mewarisi Nilai Daripada Elemen Induk?

Bolehkah Kami Menyimpan Nilai Diwarisi dalam Sifat Tersuai CSS?

Dalam CSS, sifat tersuai (juga dikenali sebagai pembolehubah CSS) menyediakan cara yang mudah untuk menyimpan dan menggunakan semula nilai sepanjang sebuah dokumen. Walau bagaimanapun, bolehkah pembolehubah ini mewarisi nilai daripada elemen induknya?

Mari kita pertimbangkan kod sampel:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  background: var(--color);
}

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

.blue {
  background: rgba(0, 255, 255, 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 contoh ini, kami ingin mewarisi warna latar belakang elemen .box untuk its :before pseudo-element menggunakan pembolehubah CSS. Walau bagaimanapun, pembolehubah --color ditakrifkan pada peringkat :root dan elemen pseudo :before bersarang dalam .box.

Tetapan latar belakang: warisi pada :before tidak berfungsi, kerana sifat tersuai diutamakan melebihi nilai yang diwarisi.

Penyelesaian: Pengunduran Nilai Awal

Untuk menyimpan warisan nilai dalam pembolehubah CSS, kita boleh menggunakan nilai awal CSS sebagai sandaran. Nilai awal mewakili keadaan lalai atau tidak ditetapkan bagi sesuatu harta.

Dalam kes kami, kami boleh mengubah suai kod kami seperti berikut:

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

Dengan menentukan awal sebagai nilai sandaran untuk var( --color), kami memaksa penggunaan nilai yang diwarisi apabila --color tidak ditetapkan secara eksplisit. Ini membolehkan kita mewarisi warna latar belakang daripada elemen induk.

Untuk menunjukkan perkara ini, mari kita tetapkan warna latar belakang .box kepada kelabu. Walaupun kami tidak mentakrifkan --warna secara eksplisit dalam kes ini, elemen pseudo :before masih akan mewarisi warna latar belakang .box disebabkan oleh sandaran nilai awal.

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

Atas ialah kandungan terperinci Bolehkah Kami Menggunakan Sifat Tersuai CSS untuk Mewarisi Nilai Daripada Elemen Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!