Bagaimanakah Saya Boleh Mengatasi Warisan Hiasan Teks CSS dengan Berkesan?

Memahami Pewarisan Hiasan Teks CSS

Dalam CSS, mengatasi hiasan teks boleh menjadi satu cabaran. Apabila elemen induk dengan gaya hiasan teks digunakan, ia mewarisi hiasannya kepada semua elemen anaknya. Ini boleh menyebabkan kekeliruan apabila cuba mengawal hiasan elemen tertentu.

Kes Mengatasi Hiasan Teks

Pertimbangkan contoh yang disediakan, di mana CSS berikut digunakan:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

Dan HTML adalah seperti berikut:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

Di sini, tingkah laku yang diharapkan ialah item senarai bersarang tidak akan menerima hiasan, manakala item induk dengan kelas u akan digariskan. Walau bagaimanapun, keputusan menunjukkan bahawa semua item senarai digariskan.

Penjelasan

Sebab kelakuan ini terletak pada sifat hiasan teks CSS. Tidak seperti sifat fon lain, hiasan teks digunakan pada keseluruhan elemen, termasuk semua elemen bersarang. Ini bermakna hiasan yang ditakrifkan dalam bekas induk digunakan secara rekursif kepada anak-anaknya, tanpa mengira gaya hiasan teks mereka sendiri.

Tingkah laku ini didokumenkan dalam spesifikasi CSS21:

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element.

Kesimpulan

Mengatasi hiasan teks dalam CSS memerlukan pemahaman kelakuan warisan ini. Untuk memastikan elemen tertentu tidak mewarisi hiasan daripada induknya, adalah perlu untuk mentakrifkan hiasan teks: tiada untuk setiap peringkat sarang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengatasi Warisan Hiasan Teks CSS dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!