CSS 선택기를 사용하여 모든 속성 이름을 가진 요소를 대상으로 지정할 수 있습니까?

무분별한 속성 타겟팅을 위한 CSS 선택기

소개

웹 개발에서는 특정 속성을 기반으로 요소를 조작하기 위해 CSS 선택기를 사용하는 경우가 많습니다. . 데이터 속성을 다룰 때 사용 가능한 타겟팅 옵션과 해당 제한 사항을 이해하는 것이 중요합니다.

와일드카드 속성 이름

와일드카드 속성 이름의 개념은 필요에 따라 발생합니다. 이름에 관계없이 특정 네임스페이스 내의 속성을 소유하는 요소를 선택합니다. 이상적인 솔루션처럼 보일 수 있지만 현재 이 기능을 구현할 수 있는 CSS 선택기가 없습니다.

사용 가능한 옵션

그러나 다음을 수행할 수 있는 선택기가 있습니다. 특정 패턴을 기반으로 하는 대상 속성 값:

• [data-something='value'] 다음과 같은 데이터 속성이 있는 요소를 대상으로 합니다. "data-something" 및 "value"와 정확히 동일한 값.
• [data-something^='value']는 "data-something"이 "value"로 시작하는 요소를 선택합니다.
• [data-something*='value']는 "data-something"에 다음이 포함된 요소를 대상으로 합니다. "value".

모든 이름을 가진 속성 타겟팅

안타깝게도 모든 속성 이름을 가진 요소를 직접 타겟팅하는 선택기는 없습니다. 즉, [data-*]와 같은 와일드카드 속성 이름은 지원되지 않습니다.

향후 구현 제안

CSS 커뮤니티 내에서 이를 도입하기 위한 논의가 진행 중입니다. 속성 타겟팅을 위한 보다 포괄적인 구문입니다. Simon Pieters가 제안한 한 가지 제안은 네임스페이스 선언에 와일드카드를 사용하는 것입니다.

• x-admin-*는 x-admin 네임스페이스 내의 모든 속성과 일치합니다.
• [data-my-* ]는 data-my로 시작하는 모든 속성을 대상으로 합니다.

이러한 제안은 아직 표준화되지 않았지만 속성의 향후 개발 가능성을 나타냅니다. 타겟팅합니다.

위 내용은 CSS 선택기를 사용하여 모든 속성 이름을 가진 요소를 대상으로 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!