Mengapa Sifat Tersuai CSS Scoped Gagal Mengatasi Nilai yang Diwarisi?

Sifat Tersuai CSS Berskop: Mengatasi Nilai Diwarisi

Apabila bekerja dengan sifat tersuai CSS, skop yang ditakrifkan mempengaruhi tingkah laku mereka. Dalam kes ini, sifat tersuai berskop digunakan untuk menskalakan saiz berdasarkan pembolehubah yang ditakrifkan dalam skop luar. Walau bagaimanapun, kesan yang diingini tidak tercapai, kerana ketiga-tiga senarai dipaparkan pada skala yang sama.

Memahami Isu Skop

Sifat tersuai yang ditakrifkan dengan -- yang bukan bersarang dalam peraturan lain dianggap skop global dan menjejaskan semua elemen dalam dokumen. Walau bagaimanapun, apabila harta tersuai ditakrifkan dalam peraturan bersarang, ia menjadi skop kepada peraturan itu dan keturunannya. Ini bermakna mana-mana elemen di luar peraturan itu tidak akan mewarisi nilai harta tersuai.

Menetapkan Semula Harta Tersuai

Dalam kod yang disediakan, elemen akar mentakrifkan - -skala harta tersuai dan mengira nilai --size-* berdasarkannya. Selepas itu, elemen anak mentakrifkan harta tersuai --skala mereka sendiri. Ini mengakibatkan elemen anak mengatasi nilai --scale yang diwarisi daripada elemen akar.

Untuk menangani perkara ini, adalah perlu untuk menetapkan semula sifat tersuai skala - dalam elemen anak kepada nilai baharu yang akan digunakan untuk pengiraan. Dengan berbuat demikian, sifat tersuai diskop dengan berkesan kepada elemen anak dan keturunannya.

Kod Kemas Kini

Berikut ialah versi kod yang dikemas kini dengan pembetulan:

: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;
}

Atas ialah kandungan terperinci Mengapa Sifat Tersuai CSS Scoped Gagal Mengatasi Nilai yang Diwarisi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!