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

콘텐츠 기반 선택자를 대상으로 하는 CSS 규칙

순수한 단어를 사용하여 특정 단어가 포함된 앵커에 고유한 스타일을 적용할 수 있는지 여부에 대한 의문이 생깁니다. CSS3를 포함한 CSS. 기술적인 한계로 인해 CSS만으로는 콘텐츠를 기반으로 요소를 선택하는 기능이 부족합니다.

설명:

":contains" 선택기가 한 번 제안된 반면 잠재적인 솔루션이지만 CSS3 선택기 작업 초안에는 포함되지 않았습니다. 따라서 콘텐츠를 기반으로 요소를 타겟팅하기 위해 CSS를 독점적으로 사용하는 것은 불가능합니다.

대체 접근 방식:

해결 방법으로 JavaScript를 사용하여 이 기능을 구현할 수 있습니다. 한 가지 접근 방식은 페이지의 모든 앵커를 반복하고 정규식을 사용하여 원하는 단어가 있는지 내부 HTML을 테스트하는 것입니다. 일치하는 항목이 발견되면 그에 따라 앵커 스타일을 수정할 수 있습니다.

코드 예:

다음 JavaScript 코드는 이를 달성하는 방법을 보여줍니다.

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

이 예에서는 페이지의 모든 앵커가 반복되며 앵커의 내부 HTML에 다음 단어가 포함되어 있는 경우 "SpecificWord"(대소문자 구분), 색상은 빨간색으로 설정됩니다.

참고:

순수한 CSS 내에는 직접적인 솔루션이 없지만 JavaScript는 유연한 콘텐츠 기반 스타일 적용에 대한 해결 방법.

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