Span 요소를 사용하지 않고 H1 태그의 마지막 단어 색상을 어떻게 변경할 수 있습니까?

CSS를 사용한 최종 단어 색상 변경의 대안

웹 개발 영역에서는 제목(< h1>)은 일반적인 작업입니다. 그러나 제목 텍스트 내의 개별 단어를 선택적으로 수정하는 경우 CSS만으로는 부족할 수 있습니다.

다른 색상으로 태그를 지정하세요. 태그를 지정하고 CSS를 적용하는 것은 제공된 예에서 볼 수 있듯이 전통적인 접근 방식입니다.

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

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

이 접근 방식은 제목 내에 추가 범위 요소를 생성하여 복잡성을 더합니다. 이를 방지하고 원하는 효과를 얻으면서 더욱 깔끔한 코드 구조를 유지하려면 lettering.js와 같은 외부 라이브러리가 활용됩니다.

정확한 색상 사용자 정의를 위해 lettering.js 활용

lettering.js는 ::last-word를 포함한 추가 옵션으로 CSS 선택기를 확장하여 솔루션을 제공합니다. 이를 통해 개발자는 별도의 태그 없이 제목의 마지막 단어를 타겟팅할 수 있습니다. 꼬리표. CSS 코드는 더욱 간결하고 간단해졌습니다.

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

여기서 첫 번째 규칙은 전체 제목의 기본 색상을 설정하고, 두 번째 규칙은 마지막 단어에 다른 색상을 적용합니다. 이 ::마지막 단어 선택기가 작동하려면 lettering.js가 필요하다는 점을 기억하는 것이 중요합니다. 이는 CSS에서 기본적으로 지원되지 않기 때문입니다.

lettering.js를 활용하면 모양을 사용자 정의하는 데 더 큰 유연성을 얻을 수 있습니다. 당신의 제목. 색상 변경을 위해 특정 단어를 분리하거나 필요에 따라 다른 스타일을 적용하여 웹사이트 콘텐츠의 시각적 효과와 가독성을 높일 수 있습니다.

위 내용은 Span 요소를 사용하지 않고 H1 태그의 마지막 단어 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!