CSS를 사용하여 콘텐츠에 따라 앵커 스타일을 지정할 수 있나요?

콘텐츠 기반 CSS 규칙

CSS를 사용하여 특정 단어가 포함된 앵커에 고유한 스타일을 적용할 수 있나요?

답변

안타깝게도 순수 CSS는 콘텐츠를 기반으로 요소 스타일을 지정하는 기본 솔루션을 제공하지 않습니다. 제안된 ':contains' 선택기는 현재 CSS3 선택기 작업 초안의 일부가 아닙니다.

JavaScript 해결 방법

이 기능을 구현하려면 JavaScript를 사용할 수 있습니다. 예를 들어, 다음 코드 조각은 문서의 모든 링크를 반복하고 내용이 "SpecificWord" 문자열과 일치하는 모든 앵커에 빨간색을 적용합니다.

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

이 예제 HTML은 스크립트의 효과를 보여줍니다.

<a href="#">SpecificWord</a>
<a href="#">OtherWords</a>

실행 시 첫 번째 앵커의 스타일은 빨간색으로 지정되고 두 번째 앵커는 기본값을 유지합니다. 스타일링.

위 내용은 CSS를 사용하여 콘텐츠에 따라 앵커 스타일을 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!