Mengapa `text-decoration: none` Tidak Sentiasa Alih Keluar Hiasan Teks dalam Elemen CSS Bersarang?

Memahami CSS Text Decoration Override

Dalam CSS, sifat hiasan teks membenarkan penambahan atau pengalihan keluar kesan teks seperti garis bawah atau coretan. Walau bagaimanapun, anda mungkin menghadapi situasi di mana percubaan penggantian anda untuk mengalih keluar hiasan teks kelihatan tidak berkesan. Ini kerana hiasan teks berkelakuan berbeza daripada sifat penggayaan teks lain seperti berat fon.

Penyebaran Elemen Bersarang

Kunci untuk memahami tingkah laku ini terletak pada penyebaran gaya hiasan teks. Apabila anda menggunakan hiasan teks pada elemen, ia akan mempengaruhi bukan sahaja elemen itu tetapi juga elemen bersarang di dalamnya. Ini bermakna menetapkan hiasan teks: tiada pada elemen induk hanya akan mengalih keluar hiasan daripada elemen induk itu sendiri, tetapi mana-mana elemen anak akan mewarisi hiasan ibu bapa.

Contoh

Dalam contoh yang disediakan, anda mempunyai 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;
}

Dan yang berikut HTML:

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

Menggunakan CSS ini pada HTML akan menyebabkan item senarai bersarang (

dalam

) turut menerima hiasan teks, walaupun anda telah menetapkan hiasan teks secara eksplisit: tiada pada elemen tersebut. Ini kerana induk li (dengan kelas "u") mewarisi hiasan teksnya kepada elemen anaknya.

Untuk mengalih keluar hiasan daripada item senarai bersarang, anda perlu menentukan hiasan teks: tiada pada setiap tahap bersarang. Ini akan kelihatan seperti:

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: none; /* Added */
}

Pertimbangan Selanjutnya

Perlu diingat bahawa tingkah laku penyemak imbas boleh berbeza-beza mengenai penyebaran hiasan teks. Sesetengah penyemak imbas mentafsir spesifikasi dengan lebih ketat dan menggunakannya seperti yang diterangkan di atas, manakala yang lain mungkin menyebarkan hiasan walaupun dengan hiasan teks: tiada satu pun ditetapkan pada unsur keturunan.

Atas ialah kandungan terperinci Mengapa `text-decoration: none` Tidak Sentiasa Alih Keluar Hiasan Teks dalam Elemen CSS Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!