Saya cuba menskalakan saiz melaluivarsifat tersuai supaya kelas boleh digubah tanpa gandingan. Kesan yang diingini ialah 3 senarai akan mempunyai 3 skala berbeza, tetapi seperti yang ditunjukkan pada CodePen, kesemua 3 senarai mempunyai skala yang sama. Saya sedang mencari penjelasan tentang skop dan teknik sifat tersuai CSS yang boleh mencapainya dengan kod yang boleh digubah dan digandingkan secara longgar.
:root { --size-1: calc(1 * var(--scale, 1) * 1rem); --size-2: calc(2 * var(--scale, 1) * 1rem); --size-3: calc(3 * var(--scale, 1) * 1rem); } .size-1 { font-size: var(--size-1) } .size-2 { font-size: var(--size-2) } .size-3 { font-size: var(--size-3) } .scale-1x { --scale: 1 } .scale-2x { --scale: 2 } .scale-3x { --scale: 3 } html { font: 1em sans-serif; background: papayawhip; } ol { float: left; list-style: none; margin: 1rem; }
- size 1
- size 2
- size 3
- size 1
- size 2
- size 3
- size 1
- size 2
- size 3
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam kes anda, anda telah menilai
--scale自定义属性来定义--size-*属性，然后定义了--scaledi peringkat akarsekali lagidi dalam elemen kanak-kanak. Ini tidak akan mencetuskan penilaian lagi kerana ia sudah dilakukan dilapisan atas.Berikut adalah contoh mudah untuk menggambarkan masalah ini:
Untuk menyelesaikan masalah anda, anda perlu mentakrifkan pengisytiharan dari
:root移至与--scaleke tahap yang sama:Dalam kes ini,
--scale的定义级别与其评估相同，因此将为每种情况正确定义--size-*.DariSpesifikasi:
Dalam kes pertama, anda terperangkap pada3kerana tiada nilai ditentukan untuk
--skala pada peringkat akar. Dalam kes terakhir, kami terperangkap pada
kerana kami menentukan--scale指定值。在最后一种情况下，我们陷入了 2，因为我们在同一级别定义了--scale2
kerana ia tidak berguna. Tahap akar ialah tahap teratas dalam DOM, jadi semua elemen akan mewarisi nilai yang sama, adalah mustahil untuk mempunyai nilai yang berbeza dalam DOM melainkan kita menilai semula pembolehubah itu. Kod anda bersamaan dengan kod ini::rootDalam semua kes kita harus mengelakkan sebarang penilaian di peringkat:root { --size-1: calc(1 * 1 * 1rem); --size-2: calc(2 * 1 * 1rem); --size-3: calc(3 * 1 * 1rem); }Mari beri contoh lain:
--warna dengan menukar salah satu daripada 3 pembolehubah yang ditakrifkan pada tahap
, tetapi kita tidak boleh melakukan ini dan kod tindakan di atas adalah sama seperti ini::root级别定义的 3 个变量之一来更改--colorSecara intuitif, kita mungkin berfikir bahawa kita boleh menukar
--r,
kod> jadi kami telah menggunakannya Nilai menggantikan mereka. Dalam kes ini kita ada 3 kemungkinan:--r、--g、--b）在:root3 pembolehubah (--g,--b) dinilai dalam:rootGunakan JS atau peraturan CSS lain untuk menukar pembolehubah dalam:rootakan menjadi tidak berguna (atau sekurang-kurangnya akan menjadi lalai)::root选择器更改为通用选择器*kepada pemilih universalDengan mengambil kira perkara ini, kita harus sentiasa mengekalkan penilaian ke tahap paling rendah yang mungkin dalam pepohon DOM, terutamanyaselepas pembolehubah berubah(atau pada tahap yang sama)
Ini adalah sesuatu yang kita tidak patut lakukan
Inilah yang patut kita lakukan
Kita juga boleh melakukan ini: