CSS 스타일을 개별 문자에 직접 적용할 수 있습니까? 그렇지 않은 경우 대안은 무엇입니까?

CSS를 사용하여 특정 문자 스타일 지정

장난처럼 보일 수 있지만 CSS 스타일을 적용하여 특정 문자를 대상으로 지정하고 수정하는 것이 가능합니까? 이내에 text?

답변

안타깝게도 순수 CSS는 특정 문자의 타겟 스타일을 허용하지 않습니다. CSS는 요소 또는 블록 수준에서 작동합니다. 즉, 전체 요소(예: 단락, 제목 또는 개별 단어)의 속성을 조작할 수 있지만 개별 문자를 수정하는 데 필요한 세부적인 제어 기능은 부족합니다.

그러나 , 특히 JavaScript 및 DOM 조작을 사용하여 원하는 효과를 얻을 수 있는 대체 접근 방식이 있습니다.

JavaScript 해결책

한 가지 가능한 해결책은 JavaScript를 활용하여 주어진 문자열 내에서 특정 문자를 찾고 스타일을 지정하는 것입니다. innerHTML 속성과 정규식을 활용하면 원하는 스타일로 범위 요소에 대상 문자를 래핑하는 것이 가능해집니다.

다음은 특정 문자의 모든 인스턴스를 강조 표시하는 JavaScript 함수의 예입니다(이 경우 문자 "Z")(빨간색):

jQuery.fn.highlight = function(str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function() {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z", "highlight");

데모

이것을 확인하세요 JavaScript 솔루션의 실제 작동 모습을 볼 수 있는 JSFiddle 데모: [JSFiddle 링크]

이 JavaScript 접근 방식을 사용하면 특정 문자를 정확하게 타겟팅하고 스타일을 지정할 수 있어 CSS에 직접적인 문자 수준 스타일 옵션이 없는 문제에 대한 해결 방법을 제공합니다.

위 내용은 CSS 스타일을 개별 문자에 직접 적용할 수 있습니까? 그렇지 않은 경우 대안은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!