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

CSS를 사용하여 콘텐츠 기반 앵커 스타일 지정

순수한 CSS를 사용하여 특정 단어가 포함된 앵커에 고유한 스타일을 적용할 수 있나요? :contains 선택기 제안이 과거에 고려되었지만 현재는 공식 CSS3 선택기 사양의 일부가 아닙니다.

해결책:

순수한 CSS에는 콘텐츠를 기반으로 앵커를 타겟팅하는 기능이 있으므로 JavaScript가 대안 솔루션이 됩니다.

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

이 스크립트는 페이지의 모든 링크를 반복하고 HTML 콘텐츠 내 어디에나 "SpecificWord" 문자열이 포함되어 있는지 확인하세요. 일치하는 항목이 발견되면 스타일 속성에 지정된 대로 링크 색상이 빨간색으로 설정됩니다.

사용법:

이 솔루션을 사용하려면 다음을 포함할 수 있습니다. HTML 페이지에 스크립트를 넣습니다. 예는 다음과 같습니다.

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

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

이 스크립트는 첫 번째 앵커 요소에 "SpecificWord" 문자열이 포함되어 있으므로 빨간색으로 바꿉니다.

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