h1 見出しの最後の単語の色を変更するにはどうすればよいですか?

CSS を変更して h1 見出しの最終用語の色を変更する

Web サイトのタイトルの美しさを高めることは、ウェブ開発。この調査は、h1 見出しの最後の単語の色の変更に焦点を当てています。

これを実現するには、最初のアプローチでは、span 要素を使用します。

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

別の CSS ルールを適用することで、メインタイトルと最後の単語に異なる色を付けることができます。ただし、この方法には、追加の HTML マークアップが必要になるという欠点があります。

追加のマークアップの必要性を排除する代替ソリューションでは、lettering.js ライブラリを使用します。このライブラリでは、::last-word セレクターの使用が可能になり、h1 見出しの最後の単語を具体的にターゲットにすることができます:

h1 {
  color: #f00;
}

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

lettering.js ライブラリを組み込み、::last-単語セレクターを使用すると、余分なマークアップ要素を追加せずに、h1 見出しの最後の単語の色を変更できるようになります。

以上がh1 見出しの最後の単語の色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。