Span 要素を使用せずに H1 タグの最後の単語の色を変更するにはどうすればよいですか?

CSS を使用したラストワードの色変更の代替手段

Web 開発の分野では、見出し (< h1>) は一般的なタスクです。ただし、見出しのテキスト内の個々の単語を選択的に変更する場合、CSS だけでは不十分な場合があります。

の最後の単語を強調表示したいシナリオを考えてみましょう。色違いのタグです。 を使用する

<code class="html"><h1>main <span>title</span></h1></code>

<code class="css">h1 {
  color: #ddd;
}
h1 span {
  color: #333;
}</code>

このアプローチでは、見出し内に追加の Span 要素が作成され、さらに複雑になります。これを回避し、目的の効果を達成しながらよりクリーンなコード構造を維持するには、lettering.js などの外部ライブラリが役に立ちます。

正確な色のカスタマイズに Lettering.js を活用する

letering.js は、::last-word などの追加オプションを使用して CSS セレクターを拡張することでソリューションを提供します。これにより、開発者は、別の を必要とせずに、見出しの最後の単語をターゲットにすることができます。タグ。 CSS コードはより簡潔でわかりやすくなります。

<code class="css">h1 {
  color: #f00;
}
h1::last-word {
  color: #00f;
}</code>

ここでは、最初のルールは見出し全体のデフォルトの色を設定し、2 番目のルールは最後の単語に別の色を適用します。この ::last-word セレクターは CSS でネイティブにサポートされていないため、機能するには Lettering.js が必要であることに注意することが重要です。

lettering.js を利用すると、外観をより柔軟にカスタマイズできます。あなたの見出し。特定の単語を分離して色の変更を行ったり、必要に応じて他のスタイルを適用したりして、Web サイトのコンテンツの視覚的なインパクトと読みやすさを向上させることができます。

以上がSpan 要素を使用せずに H1 タグの最後の単語の色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。