Bagaimanakah Saya Boleh Menukar Warna Perkataan Terakhir dalam Tag h1 Menggunakan CSS sahaja?

DDD

Lepaskan： 2024-10-25 09:59:02

asal

683 orang telah melayarinya

How Can I Change the Color of the Last Word in an h1 Tag Using Only CSS?

CSS untuk Mengubah Warna Kata Akhir dalam h1

Dalam bidang pembangunan web, elemen penggayaan menggunakan CSS adalah yang terpenting. Pertimbangkan senario di mana tajuk utama tapak web, diwakili oleh

tag, memerlukan percikan kepelbagaian dengan mewarnai perkataan akhir secara berbeza. Semasa menggunakan tag menyediakan penyelesaian yang mudah, pendekatan yang lebih elegan yang menghapuskan keperluan untuk penanda tambahan adalah diingini.

Potensi Penyelesaian

Secara tradisinya, mencapai kesan ini semata-mata melalui CSS adalah mustahil . Walau bagaimanapun, kemajuan dalam bidang CSS telah membuka kemungkinan baru. Salah satu alat tersebut ialah pustaka lettering.js, yang memperkenalkan pemilih ::last-word.

Pelaksanaan

Untuk menggunakan pemilih ini, masukkan skrip lettering.js ke dalam HTML tapak web. Selepas itu, peraturan CSS berikut boleh dilaksanakan:

<code class="css">h1 {
  color: #f00;
}

/* EDIT: Requires lettering.js. 
 * Please read the complete post, before downvoting. Instead vote up. Thank you :)
 */
h1::last-word {
  color: #00f;
}</code>

Salin selepas log masuk

Dengan menggunakan teknik ini, kata akhir dalam