Span을 사용하지 않고 h1 태그의 마지막 단어 스타일을 지정하는 방법은 무엇입니까?

범위를 사용하지 않고 h1의 마지막 단어 색상 변경

CSS는 HTML 요소 스타일링을 위한 광범위한 기능을 제공하지만 부족합니다. 문자열 내의 특정 단어를 대상으로 하는 직접적인 방법입니다. 예를 들어, h1 제목의 마지막 단어 색상을 변경할 수 있습니다. 스팬 태그에 마지막 단어를 래핑하고 스타일을 지정하는 것은 일반적인 솔루션입니다. 순수 CSS를 사용하는 더 우아한 접근 방식이 있습니까?

CSS 환경 탐색

안타깝게도 , 순수 CSS에는 마지막 단어를 대상으로 하는 기본 선택기가 없습니다. CSS의 특정성 규칙은 일반적인 스타일보다 인라인 스타일이나 보다 구체적인 선택기의 사용을 우선시합니다. 따라서 h1:last-child와 같은 규칙을 사용하면 마지막 단어가 구체적으로 분리되지 않습니다.

JavaScript 라이브러리의 힘

이러한 한계를 극복하기 위해 다음을 활용할 수 있습니다. JavaScript 라이브러리의 힘. 그러한 라이브러리 중 하나가 고급 요소 조작 기능을 제공하는 lettering.js입니다.

lettering.js를 사용한 솔루션

lettering.js를 사용하면 ::last를 만들 수 있습니다. -단어 선택기를 선택하고 그에 따라 스타일을 지정하세요. 작동 방식은 다음과 같습니다.

<code class="html"><h1 id="main-title">main title</h1></code>

<code class="js">// Initialize lettering.js
lettering.js(document.querySelector('h1'));

// Append the ::last-word selector
h1[id="main-title"]::last-word {
  color: #00f;
}</code>

이제 h1 제목의 마지막 단어는 범위 태그를 사용하지 않고도 다르게 색상이 지정됩니다. 이 솔루션이 작동하려면 HTML 문서에 lettering.js를 포함해야 합니다.

위 내용은 Span을 사용하지 않고 h1 태그의 마지막 단어 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!