CSS 속성 선택기에서 \'i\' 수정자는 무엇을 합니까?

CSS 속성 선택기에서 "i"의 수수께끼 공개

CSS 영역에서 수수께끼의 문자 "i"는 속성 선택기 내에 등장하여 많은 사람들이 당황했습니다. 그 미스터리를 풀기 위해 그 목적을 파헤치고 그것이 웹 스타일링에 가져오는 중요성을 알아봅시다.

CSS 속성 선택기에서 'i'는 무엇입니까?

CSS 속성 선택기의 "i" 수정자는 대소문자를 구분하지 않는 속성 일치를 의미합니다. CSS 선택기 레벨 4에 도입된 이 기능을 사용하면 대소문자에 상관없이 HTML 속성을 유연하게 일치시킬 수 있습니다.

어떻게 작동하나요?

다음을 고려하세요. 다음 코드 조각:

[type="checkbox" i]

이 선택기는 선택 여부에 관계없이 모든 체크박스 입력 요소와 일치합니다. 'type' 속성은 대문자, 소문자 또는 둘의 혼합입니다. 즉, 'type="Checkbox"', 'type="cHeCkBoX"' 등의 속성을 가진 요소를 일치시킵니다.

역사적 맥락 및 가용성

대소문자를 구분하지 않는 속성 일치는 처음에 Chrome의 사용자 에이전트 스타일에 도입되었지만 나중에 실험적 기능을 통해 웹 콘텐츠에 대해 활성화될 수 있습니다. 플래그. 이후 Chrome 49, Firefox 47, Safari 9 및 Opera 37*을 포함한 최신 브라우저에서 광범위한 지원을 얻었습니다.

예제 및 브라우저 테스트

To 기능을 보여주기 위해 'data-test="a"' 속성이 있는 요소에 대해 녹색 배경색을 설정하는 선택기를 고려해 보겠습니다. 'data-test="A"'.

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

이 코드가 다음 HTML에 적용되는 경우:

<div data-test="A"></div>

대소문자를 구분하지 않으면 결과 요소의 배경이 녹색이 ​​됩니다. 속성 일치는 브라우저에서 지원되며 그렇지 않은 경우 빨간색으로 표시됩니다.

위 내용은 CSS 속성 선택기에서 \'i\' 수정자는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!