


Bagaimana untuk Mencapai Nilai Diwarisi dengan Pembolehubah CSS?
Nov 14, 2024 pm 04:38 PMBagaimana 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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres
