Mengapa Hiasan Teks Tidak Mewarisi Dengan Betul dalam CSS?

Isu Penggantian Hiasan Teks CSS

Dalam hierarki sifat CSS, sifat khusus diutamakan berbanding sifat yang diwarisi daripada unsur induk. Walau bagaimanapun, sifat text-decoration mempamerkan pengecualian kepada peraturan ini.

Masalah:

Pertimbangkan kod berikut:

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

Seperti yang ditunjukkan dalam ini [demo](http://jsfiddle.net/5t9sV/), sifat text-decoration elemen anak span tidak mengatasi hiasan garis bawah daripada induk a elemen.

Sebab:

Menurut spesifikasi CSS, sifat teks-hiasan unsur keturunan "tidak boleh memberi kesan pada hiasan daripada nenek moyang." Ini pada asasnya bermakna hiasan teks digunakan merentas keseluruhan elemen, tanpa mengira sebarang elemen kanak-kanak yang ada.

Penyelesaian:

Dalam CSS3, terdapat sifat yang dipanggil text-decoration-skip yang boleh digunakan pada elemen anak untuk melangkau hiasan teks yang diwarisi. Walau bagaimanapun, ia hanya berfungsi untuk elemen sebaris (cth., span) dan penyemak imbas yang disokong mungkin berbeza-beza.

Contohnya, untuk menjadikan teks di dalam elemen span muncul tanpa garis bawah, anda boleh menambah:

span {
  text-decoration-skip: ink;
}

Perhatikan bahawa dakwat ialah salah satu nilai yang mungkin untuk text-decoration-skip, yang merangkumi aksara, ruang dan objek terbenam.

Atas ialah kandungan terperinci Mengapa Hiasan Teks Tidak Mewarisi Dengan Betul dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!