CSS를 사용하여 'data-*' 속성의 존재 여부를 기반으로 요소를 타겟팅할 수 있습니까?

와일드카드를 사용한 속성 이름 선택

웹 개발에서 CSS 선택기는 해당 속성을 기반으로 HTML 요소를 정밀하게 제어할 수 있습니다. 다양한 속성 기반 선택기 중에서 "data-*" 속성을 보유한 타겟팅 요소에 대한 특별한 요구가 있습니다. 속성 값을 기준으로 요소를 선택하는 다양한 방법이 있지만 "데이터" 속성의 존재 여부만을 기준으로 요소를 타겟팅할 수 있는지에 대한 의문이 생깁니다.

현재 가능성을 이해하기 위해 기존 속성을 살펴보겠습니다. 값 기반 선택기:

• 완전 일치: 속성 값이 지정된 값과 같은 요소를 선택합니다. ([data-something="value"]).
• 부분 일치(시작): 속성 값이 지정된 접두사([data-something^="value)로 시작하는 요소를 선택합니다. "]).
• 부분 일치(끝): 속성 값이 지정된 접미사로 끝나는 요소를 선택합니다. ([data-something$="value"]).
• 부분 일치(모든 위치): 속성 값에 지정된 하위 문자열([data-something*="value")이 포함된 요소를 선택합니다. "]).

그러나 속성 이름 자체를 기반으로 요소를 타겟팅하는 특정 경우에는 단일 요소만 있습니다. 옵션:

• 속성 이름 있음: 특정 속성([data-something])을 소유한 요소를 선택합니다.

안타깝게도 현재 [data-*]와 같은 속성 이름에 대한 와일드카드 선택자는 없습니다. 이는 CSS만 사용하여 "데이터" 속성이 있는 요소를 대상으로 지정할 수 없음을 의미합니다.

그럼에도 불구하고 선택기 레벨 3 사양 내에서는 속성 이름에 와일드카드 기능을 도입하려는 지속적인 노력이 있습니다. 관심을 끌었던 제안된 구문은 다음과 같습니다.

• x-admin-*: "x-admin-"으로 시작하는 속성 이름을 가진 요소를 선택합니다.
• [data-my-*]: 속성 이름이 다음으로 시작하는 요소를 선택합니다. "data-my-".

이러한 선택기는 아직 표준의 일부는 아니지만 향후 와일드카드 속성 이름에 대한 가능성을 보여줍니다.

위 내용은 CSS를 사용하여 'data-*' 속성의 존재 여부를 기반으로 요소를 타겟팅할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!