CSS에서 \'data\' 속성이 있는 요소를 어떻게 선택할 수 있습니까?

와일드카드 기반 속성 이름용 CSS 선택기

CSS 선택기로 작업할 때 해당 속성을 기반으로 요소를 타겟팅하는 것이 필수적입니다. "data-*" 속성은 요소에 대한 사용자 정의 데이터를 저장하는 편리한 방법을 제공합니다. 그러나 특정 이름에 관계없이 "데이터" 속성이 있는 요소를 선택해야 하는 경우가 있을 수 있습니다.

속성 이름 타겟팅 현황

현재 CSS는 속성 이름에 대한 와일드카드 선택기에 대한 기본 지원을 제공하지 않습니다. [data-*] 제안은 흥미로운 아이디어이지만 아직 구현되지 않았습니다.

기존 옵션

와일드카드 속성 이름에 대한 직접적인 솔루션은 없지만 다음 CSS 선택기를 사용할 수 있습니다.

[data]

이 선택기는 "데이터" 속성이 있는 모든 요소를 ​​대상으로 합니다. 그 이름. 그러나 "data"로 시작하는 다른 속성을 가진 요소를 실수로 선택할 수 있습니다.

제안된 구문

[email protected]에서 제안된 유망한 구문입니다. 메일링 리스트는 다음과 같습니다.

x-admin-* { ... }
[data-my-*] { ... }

이 구문은 속성 이름의 접두사 내에서 와일드카드 일치를 허용하여 보다 구체적인 사용을 가능하게 합니다.

결론

현재 CSS에는 와일드카드 속성 이름을 기반으로 요소를 타겟팅하는 직접적인 방법이 없습니다. 그러나 제안된 구문은 보다 다양하고 효율적인 속성 기반 선택을 가능하게 하는 향후 개발을 약속합니다.

위 내용은 CSS에서 \'data\' 속성이 있는 요소를 어떻게 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!