Bagaimanakah Warisan Hiasan Teks CSS Berfungsi dengan Elemen Kanak-kanak?

Isu Penggantian Harta hiasan teks CSS

Dalam HTML dan CSS, sifat hiasan teks digunakan untuk menambah atau mengalih keluar hiasan, seperti sebagai garis bawah atau coretan, kepada elemen teks. Walau bagaimanapun, apabila elemen anak mengandungi sifat hiasan teksnya sendiri, isu timbul sama ada harta anak boleh mengatasi harta yang diwarisi daripada induk.

Pertimbangkan contoh CSS ini:

a {
    text-decoration: underline;
}

span {
    text-decoration: none;
}

Dalam kes ini, elemen tidak mewarisi sifat hiasan teks daripada induk dan sebaliknya menggunakan hiasan teksnya sendiri: tiada; nilai. Keputusan ini dijangkakan kerana sifat hiasan teks telah ditentukan pada kedua-dua elemen induk dan anak.

Menurut spesifikasi hiasan teks CSS, sifat hiasan teks pada elemen anak tidak boleh mempunyai sebarang kesan pada hiasan nenek moyang. Ini bermakna hiasan teks elemen induk akan sentiasa digunakan, tanpa mengira nilai kanak-kanak.

Soalan yang dipautkan juga memberikan maklumat lanjut daripada spesifikasi, menyatakan bahawa "Hiasan teks pada kotak sebaris dilukis merentas keseluruhan elemen , merentasi mana-mana unsur keturunan tanpa menghiraukan kehadiran mereka." Ini menunjukkan bahawa hiasan teks induk akan sentiasa digunakan pada keseluruhan kotak sebaris, termasuk mana-mana elemen anak.

Dalam versi CSS kemudian (selepas 2.1), sifat text-decoration-skip diperkenalkan untuk menangani isu ini. Dengan menetapkan text-decoration-skip: langkau pada elemen anak, ia boleh memaksa hiasan ibu bapa untuk melangkau kandungan anak.

Kesimpulannya, sifat hiasan teks tidak boleh ditindih oleh elemen anak disebabkan oleh reka bentuk spesifikasi. Untuk mengawal hiasan teks pada bahagian tertentu elemen, sifat text-decoration-skip boleh digunakan dalam versi CSS kemudiannya.

Atas ialah kandungan terperinci Bagaimanakah Warisan Hiasan Teks CSS Berfungsi dengan Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!