Bagaimana untuk Menukar Warna Perkataan Terakhir dalam Tajuk h1?

Mengubah suai CSS untuk Mengubah Warna Penggal Akhir dalam Tajuk h1

Meningkatkan estetika tajuk tapak web anda ialah tugas biasa dalam pembangunan web. Siasatan ini memfokuskan pada mengubah warna perkataan akhir dalam tajuk h1.

Untuk mencapai matlamat ini, pendekatan awal melibatkan penggunaan elemen span:

<h1>main <span>title</span></h1>

Dengan menggunakan peraturan CSS yang berasingan, tajuk utama dan kata akhir boleh diberi warna yang berbeza. Walau bagaimanapun, kaedah ini mempunyai kelemahan untuk memperkenalkan penanda HTML tambahan.

Penyelesaian alternatif yang menghapuskan keperluan untuk penanda tambahan menggunakan perpustakaan lettering.js. Pustaka ini membolehkan penggunaan pemilih ::last-word, yang membenarkan untuk menyasarkan perkataan terakhir secara khusus dalam tajuk h1:

h1 {
  color: #f00;
}

/* Requires lettering.js. Please refer to the article linked below before downvoting. */
h1::last-word {
  color: #00f;
}

Dengan menggabungkan pustaka lettering.js dan menggunakan ::last- pemilih perkataan, anda boleh mengubah warna perkataan akhir dalam tajuk h1 tanpa menambah elemen penanda tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Warna Perkataan Terakhir dalam Tajuk h1?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!