Rumah >hujung hadapan web >tutorial css >Mengapa CSS Saya ::huruf pertama Tidak Berfungsi pada Elemen Sebaris dalam HTML Dijana Word?

Mengapa CSS Saya ::huruf pertama Tidak Berfungsi pada Elemen Sebaris dalam HTML Dijana Word?

Patricia Arquette
Patricia Arquetteasal
2024-12-14 07:27:10138semak imbas

Why Isn't My CSS ::first-letter Working on Inline Elements in Word-Generated HTML?

CSS ::huruf pertama Tidak Berfungsi

Apabila cuba menggunakan gaya CSS pada elemen sebaris dalam dokumen HTML yang dijana Microsoft Word, anda mungkin menghadapi masalah dengan pemilih ::huruf pertama. Pemilih ini direka bentuk untuk menyasarkan huruf pertama elemen blok seperti perenggan dan sel jadual, bukan elemen sebaris seperti rentang.

Untuk mengatasi had ini, sama ada:

  • Mohon ::huruf pertama ke Blok Elemen:

    p::first-letter {font-size: 500px;}
  • Tetapkan Paparan Elemen Sebaris kepada Sekat:

    span {display: block;}
    p b span::first-letter {font-size: 500px !important;}

Ingat, ::huruf pertama tidak akan menjejaskan elemen sebaris melainkan sifat paparannya ditetapkan kepada sekat atau sekatan sebaris. Tingkah laku ini berpunca daripada fakta bahawa ::huruf pertama beroperasi pada elemen blok di mana baris pertama boleh ditakrifkan.

Pertimbangan Tambahan:

  • Elakkan meletakkan kandungan sebelum huruf pertama, kerana ia boleh mengganggu penggayaan ::huruf pertama.
  • Jika anda menggunakan :sebelum dengan ::huruf pertama, ia akan menggayakan :before content, bukan huruf pertama yang sebenar.

Contoh:

  • [ Bekerja Biola dengan Blok Penggayaan](http://jsfiddle.net/sandeep/KvGr2/9/)
  • [Inline-Block Contoh](http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/)

Rujukan:

  • [Dokumentasi MDN pada ::first-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter)
  • [Rujukan SitePoint on CSS Pseudoelement :first-letter] (http://reference.sitepoint.com/css/pseudoelement-firstletter)

Atas ialah kandungan terperinci Mengapa CSS Saya ::huruf pertama Tidak Berfungsi pada Elemen Sebaris dalam HTML Dijana Word?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn