콘텐츠에 따라 CSS3 스타일 요소를 지정할 수 있나요?

콘텐츠 기반 CSS 규칙 적용 방법

특정 단어나 요소가 포함된 요소에 특정 스타일을 적용하는 것은 일반적인 요구 사항입니다. 구절. 최신 CSS에는 고급 기능이 있지만 직접 처리할 수 없는 특정 측면이 있습니다.

CSS3 스타일 요소가 콘텐츠를 기반으로 할 수 있습니까?

간단한 대답은 '아니요'입니다. CSS3에는 콘텐츠에 따라 요소의 스타일을 지정할 수 있는 기본 선택기가 포함되어 있지 않습니다. 이 기능을 활성화할 제안된 :contains 선택기는 현재 CSS3 선택기 작업 초안에서 제거되었습니다.

대체 솔루션

콘텐츠 기반 스타일을 달성하려면 , JavaScript를 사용할 수 있습니다. 다음 스니펫은 "SpecificWord"라는 단어가 포함된 앵커에 빨간색을 적용하는 방법을 보여줍니다.

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

이 JavaScript 코드는 모든 앵커 요소(document.links)를 반복하고 innerHTML에 원하는 요소가 포함되어 있는지 확인합니다. 단어를 입력하고 true이면 빨간색을 적용합니다.

결론적으로 CSS는 기본적으로 콘텐츠 기반 스타일을 지원하지 않지만 JavaScript를 사용할 수 있습니다. 비슷한 결과를 얻으려면. 이를 통해 특정 콘텐츠 요구 사항을 충족하는 요소에 대한 세분화된 스타일 규칙을 만들 수 있습니다.

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