Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menukar Warna Perkataan Terakhir dalam Tag h1 Menggunakan CSS sahaja?

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

DDD
Lepaskan: 2024-10-25 09:59:02
asal
786 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

elemen akan dihiasi dengan warna yang ditentukan, manakala teks yang selebihnya mengekalkan gaya lalainya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Perkataan Terakhir dalam Tag h1 Menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan