Bagaimanakah Pewarisan Hiasan Teks CSS Berfungsi, dan Mengapa Mengatasinya Kadang-kadang Gagal?

Memahami Warisan hiasan teks

Dalam CSS, sifat hiasan teks mengawal gaya garis hiasan yang digunakan pada teks. Walau bagaimanapun, tidak seperti gaya berkaitan teks lain seperti berat fon, hiasan teks berkelakuan dengan jelas.

Isu dengan Menggantikan Hiasan Diwarisi

Pertimbangkan kod CSS berikut:

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

Kod ini bertujuan untuk mengelakkan hiasan yang diwarisi daripada digunakan pada item senarai bersarang. Walau bagaimanapun, struktur HTML di bawah mendedahkan hasil yang tidak dijangka:

<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>

Penjelasan

Isunya terletak pada fakta bahawa hiasan teks digunakan untuk semua elemen bersarang dalam elemen yang digunakan untuknya. Ini bermakna walaupun anda cuba mengatasi hiasan yang diwarisi pada elemen bersarang, hiasan yang diwarisi masih akan digunakan.

Menurut spesifikasi CSS 2.1, "hiasan teks pada kotak sebaris dilukis merentas keseluruhan elemen , merentasi mana-mana unsur keturunan tanpa memberi perhatian kepada mereka kehadiran."

Penyelesaian

Untuk menangani isu ini, pendekatan berbeza diperlukan. Daripada bergantung pada pemilih bersarang untuk mengatasi hiasan yang diwarisi, gunakan teknik alternatif seperti:

• Menggunakan elemen pseudo ::sebelum atau ::selepas untuk mencipta garisan hiasan
• Menggunakan JavaScript untuk mengubah suai sifat hiasan teks secara dinamik
• Menggunakan harta hiasan teks terus kepada elemen yang dikehendaki tanpa bergantung pada warisan

Atas ialah kandungan terperinci Bagaimanakah Pewarisan Hiasan Teks CSS Berfungsi, dan Mengapa Mengatasinya Kadang-kadang Gagal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!