Bagaimanakah Sifat Tersuai Skop CSS Mengendalikan Pewarisan dan Penggantian?

Sifat Tersuai Skop CSS: Memahami Skop dan Warisan

Apabila mentakrifkan sifat tersuai CSS, memahami skopnya adalah penting untuk mencapai kesan yang diingini. Sifat tersuai yang diisytiharkan dalam elemen adalah skop kepada elemen itu dan keturunannya. Walau bagaimanapun, skop ini kadangkala boleh membawa kepada tingkah laku yang tidak dijangka, seperti yang digambarkan dalam soalan ini.

Isu ini berpunca daripada fakta bahawa dalam kod yang disediakan, sifat tersuai --skala ditakrifkan pada peringkat akar dan kemudian diganti. dalam elemen kanak-kanak. Tingkah laku utama ini tidak dijangka apabila menggunakan sifat tersuai berskop.

Untuk menunjukkan isu ini, mari analisa CSS:

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

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

Di sini, sifat --size-* bergantung pada nilai daripada --skala. Walau bagaimanapun, apabila mentakrifkan --scale dalam kelas .scale-1x, .scale-2x dan .scale-3x, ia mengatasi nilai yang ditakrifkan dalam :root.

Tingkah laku yang dijangkakan adalah untuk -- sifat skala untuk dinilai pada setiap elemen yang ditakrifkan, menghasilkan saiz fon yang berbeza untuk setiap senarai. Walau bagaimanapun, ini tidak berlaku kerana sifat tersuai sudah dinilai pada peringkat akar.

Untuk menangani isu ini dan mencapai kesan yang diingini, pertimbangkan untuk menggunakan sifat tersuai berskop dengan lebih konsisten. Sebagai contoh, takrifkan --size-1, --size-2 dan --size-3 dalam setiap kelas .scale-*, memastikan ia skop kepada elemen itu sahaja. Ini akan membenarkan penskalaan bebas bagi setiap senarai berdasarkan nilai --scale yang ditakrifkan dalam kelas masing-masing.

Atas ialah kandungan terperinci Bagaimanakah Sifat Tersuai Skop CSS Mengendalikan Pewarisan dan Penggantian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!