Mengapa Beberapa Sifat CSS Dicoret dalam Chrome DevTools?

Sifat CSS tersilang dalam Chrome DevTools: Mendedahkan Sebabnya

Apabila memeriksa elemen HTML dalam devtools Chrome, anda mungkin menghadapi tercoret Sifat CSS dalam anak tetingkap "Gaya". Sifat berpalang ini menunjukkan tingkah laku tertentu yang memberi penerangan tentang penggayaan elemen.

Maksud Sifat Palang

Sifat berpalang menandakan bahawa gaya asas pada mulanya digunakan tetapi kemudiannya ditindih oleh pemilih yang lebih khusus, peraturan yang lebih setempat atau sifat kemudian dalam peraturan yang sama. Tingkah laku ini berlaku kerana peraturan CSS digunakan mengikut kekhususan dan keutamaan.

Kes Khas

Selain sebab yang disebutkan di atas, sifat yang dipangkah juga boleh menunjukkan kes khas berikut:

• Gaya Dikomen Keluar: Gaya yang wujud dalam peraturan yang sepadan tetapi diulas keluar.
• Gaya Dilumpuhkan Secara Manual: Gaya yang telah dilumpuhkan secara manual dengan menyahtandanya dalam alatan pembangun Chrome.
• Ralat Sintaks: Gaya yang mengandungi ralat sintaks, ditunjukkan oleh ikon ralat di sebelah teks yang dipangkah .

Contoh

Pertimbangkan contoh berikut:

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

Dalam alat dev Chrome, memeriksa "my-div elemen " akan menunjukkan "warna latar belakang: putih" dicoret. Ini menunjukkan bahawa warna latar belakang putih awal telah digantikan oleh warna latar belakang biru berikutnya yang ditentukan untuk div dengan id "my-div."

Atas ialah kandungan terperinci Mengapa Beberapa Sifat CSS Dicoret dalam Chrome DevTools?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!