Bagaimanakah Pewarisan CSS Mempengaruhi Kekhususan dan Pengingkaran Harta?

Sifat dan Kekhususan CSS yang diwarisi

Apabila berbilang pengisytiharan CSS menyasarkan elemen yang sama, yang mempunyai kekhususan tertinggi diutamakan. Peraturan pengiraan kekhususan CSS didokumentasikan dengan baik dalam pengesyoran W3. Walau bagaimanapun, adalah kurang jelas cara harta warisan sesuai dengan skema ini.

Warisan memperkenalkan lapisan kerumitan kerana harta warisan menggabungkan kekhususan unsur induknya dengan sifatnya sendiri dengan berkesan. Ini bermakna harta yang diwarisi daripada elemen induk yang sangat khusus boleh mengatasi sifat yang digunakan secara langsung dengan kekhususan yang lebih rendah.

Pertimbangkan contoh berikut:

<h2 id="This-should-be-black">This should be black</h2>

h2 {
  color: black;
}

.all_red_text {
  color: red;
}

Dalam contoh ini, sifat warna diwarisi daripada

elemen dengan kelas all_red_text. Kelas all_red_text mempunyai kekhususan 0,1,0. Pemilih h2 mempunyai kekhususan 0,0,1.

Mengikut peraturan kekhususan CSS, pemilih yang lebih khusus (pemilih h2 dalam kes ini) harus diutamakan. Walau bagaimanapun, kerana sifat warna diwarisi, ia secara berkesan mempunyai kekhususan unsur induk (0,1,0).

Akibatnya, sifat warna yang diwarisi daripada unsur induk mengatasi sifat warna yang digunakan secara langsung . Teks dalam elemen h2 adalah hitam dan bukannya merah.

Tingkah laku ini boleh mengelirukan pada mulanya, tetapi ia merupakan bahagian penting dalam cara warisan CSS berfungsi. Dengan memahami cara sifat yang diwarisi mempengaruhi kekhususan, anda boleh mengelakkan hasil yang tidak dijangka dan memastikan kod CSS anda berfungsi seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimanakah Pewarisan CSS Mempengaruhi Kekhususan dan Pengingkaran Harta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!