Mengapa `text-decoration: none;` CSS Saya Tidak Mengatasi Elemen Bersarang?

Menyelesaikan masalah Penggantian hiasan teks CSS

Kebimbangan anda mengenai kod CSS anda tidak mengatasi sifat hiasan teks adalah cabaran biasa yang dihadapi oleh ramai pengaturcara. Mari kita selami isu ini dan cari penyelesaian.

Kunci untuk memahami isu ini terletak pada gelagat hiasan teks, yang berbeza daripada sifat berkaitan fon lain seperti berat fon. Apabila digunakan, hiasan teks mempengaruhi semua elemen bersarang, tanpa mengira kekhususannya. Ini dijelaskan dalam spesifikasi W3C:

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

Dalam kod anda, hiasan teks: tiada; peraturan, yang sepatutnya menghalang garis bawah, digunakan pada elemen li dengan kelas u. Walau bagaimanapun, kerana hiasan teks mempengaruhi elemen bersarang juga, garis bawah kekal dalam elemen li bersarang dengan kelas u.

Untuk menyelesaikan isu ini, anda boleh menggunakan gabungan kekhususan CSS dan bersarang:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: line-through; /* Apply a different line-through style */
}
ul > li > ul > li.u {
    text-decoration: underline;
}

Dengan menggunakan pendekatan ini, gaya garisan digunakan pada elemen li bersarang tanpa menjejaskan elemen li luar. Sebagai alternatif, anda juga boleh menggunakan sifat warisan secara eksplisit untuk menetapkan hiasan teks untuk elemen bersarang:

ul > li > ul {
    text-decoration: inherit;
}

Ingat, semasa menyelesaikan masalah CSS, memahami cara sifat berkelakuan dan peraturan kekhususan boleh membantu anda mencari yang berkesan penyelesaian.

Atas ialah kandungan terperinci Mengapa `text-decoration: none;` CSS Saya Tidak Mengatasi Elemen Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!