>  기사  >  웹 프론트엔드  >  CSS 선택기가 내부 HTML 콘텐츠를 기반으로 요소를 대상으로 지정할 수 있습니까?

CSS 선택기가 내부 HTML 콘텐츠를 기반으로 요소를 대상으로 지정할 수 있습니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-08 06:57:02795검색

Can CSS Selectors Target Elements Based on Inner HTML Content?

내부 HTML을 기반으로 한 CSS 스타일링: 타당성에 대한 질문

내부 HTML을 기반으로 요소를 타겟팅하고 스타일을 지정하는 것이 가능한지에 대한 의문이 제기됩니다. CSS 선택기를 사용하여 내부 HTML 콘텐츠에만 적용됩니다. 아래 그림과 같이 다양한 내부 HTML 값을 가진 여러 앵커 태그가 있는 시나리오를 고려해 보겠습니다.

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

목표는 특정 내부 HTML 값 "innerHTML2"를 포함하는 요소에만 스타일을 지정하는 것입니다. 그러나 원래 게시물에서 제안한 대로 a[value=innerHTML2]를 선택기로 사용하면 원하는 결과가 나오지 않습니다.

평결: CSS 로드블록

불행한 현실은 CSS 선택기에 내부 HTML 콘텐츠를 기반으로 요소를 직접 타겟팅하는 기능이 부족하다는 것입니다. 이는 CSS 사양에 내재된 제한 사항입니다.

대체 솔루션

이 점에서 CSS가 부족할 수 있지만 원하는 기능을 달성하기 위해 다른 접근 방식을 사용할 수 있습니다. 그러한 솔루션 중 하나는 jQuery와 같은 JavaScript 라이브러리를 활용하는 것입니다. jQuery의 풍부한 DOM 조작 기능을 활용하면 내부 HTML 값을 기반으로 요소를 선택하고 조작할 수 있습니다.

위 내용은 CSS 선택기가 내부 HTML 콘텐츠를 기반으로 요소를 대상으로 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.