CSS 속성 선택기가 'data-role'과 같은 HTML5 데이터 속성을 타겟팅할 수 있나요?

HTML5 데이터 속성용 CSS 속성 선택기

질문:

CSS 속성 선택기를 사용하여 다음을 기반으로 요소를 대상으로 지정할 수 있습니까? 다음과 같은 HTML5 데이터 속성 데이터 역할?

답변:

물론입니다. 속성 선택기를 사용하면 데이터 속성을 기반으로 요소를 쉽게 선택할 수 있습니다. 예는 다음과 같습니다.

[data-role="page"] {
    /* Styles */
}

이 선택기는 사용자 정의 속성 data-role이 "page" 값으로 설정된 모든 요소를 ​​대상으로 합니다. 속성 이름은 대괄호로 묶어야 합니다.

속성 선택기 유형:

다양한 시나리오에 사용할 수 있는 다양한 유형의 속성 선택기가 있습니다.

• [name="value"]: 속성 이름에 정확한 값이 있는 요소와 일치합니다. "value".
• [name]: 해당 값에 관계없이 속성 이름이 존재하는 요소와 일치합니다.
• [name~="value"]: 속성 이름의 값이 다음과 같은 요소와 일치합니다. 하위 문자열 "값"을 포함합니다.
• [name^="value"]: 속성 이름이 하위 문자열로 시작하는 요소와 일치합니다. "value".
• [name$="value"]: 속성 이름이 하위 문자열 "value"로 끝나는 요소와 일치합니다.

브라우저 지원:

대부분의 최신 브라우저는 사용자 정의 데이터 속성을 포함한 속성 선택기를 지원합니다. 그러나 CSS 유효성 검사에서는 네임스페이스가 아닌 속성 이름을 고려하지 않으므로 이러한 선택기로 유효성 검사 문제가 발생해서는 안 됩니다.

위 내용은 CSS 속성 선택기가 'data-role'과 같은 HTML5 데이터 속성을 타겟팅할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!