Mengapakah Sifat Tersuai Skop CSS Bersarang Saya Diabaikan?

Harta Tersuai Skop CSS Diabaikan dalam Perisytiharan Bersarang

Apabila mentakrifkan sifat tersuai dalam CSS, adalah penting untuk memahami cara skop mempengaruhi penilaian mereka. Sifat tersuai berskop hanya tersedia secara setempat dalam elemen atau komponen yang ditakrifkan. Walau bagaimanapun, cabaran biasa timbul apabila cuba menggunakan sifat tersuai berskop dalam skop luar.

Dalam kes khusus ini, matlamatnya ialah untuk menentukan faktor skala melalui sifat tersuai dan menerapkannya merentas elemen yang berbeza. Walau bagaimanapun, seperti yang ditunjukkan, semua elemen senarai diskalakan secara sama rata, tanpa mengira kelas skala yang digunakan.

Untuk menangani isu ini, adalah penting untuk ambil perhatian bahawa sifat tersuai dinilai atas-bawah. Apabila sifat tersuai ditakrifkan pada peringkat akar, seperti dalam contoh ini, sebarang takrifan seterusnya bagi sifat yang sama dalam elemen bersarang akan diabaikan.

Pertimbangkan ilustrasi ringkas ini:

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

Di sini, sifat tersuai --warna ditakrifkan pada peringkat akar. Jika kami cuba mengatasinya dalam elemen span:

<div>
  <div class="box">
    <span>

Elemen span dengan pengisytiharan CSS bersarang tidak akan bertukar menjadi merah. Ini kerana sifat tersuai telah dinilai pada peringkat akar, tetapan --warna kepada biru dan percubaan mengatasi diabaikan.

Sebaliknya, elemen span dengan diwarisi --c: merah akan bertukar merah kerana ia mewarisi nilai sifat tersuai daripada elemen induknya.

Untuk mencapai kesan yang diingini, adalah perlu untuk memastikan bahawa sifat tersuai dinilai dalam setiap komponen bersarang secara individu. Ini boleh dilakukan dengan mentakrifkan sifat setempat dalam setiap kelas atau komponen, berbanding pada peringkat akar.

Atas ialah kandungan terperinci Mengapakah Sifat Tersuai Skop CSS Bersarang Saya Diabaikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!