>웹 프론트엔드 >CSS 튜토리얼 >\'i\' 플래그는 CSS에서 대소문자를 구분하지 않는 속성 일치를 어떻게 활성화합니까?

\'i\' 플래그는 CSS에서 대소문자를 구분하지 않는 속성 일치를 어떻게 활성화합니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-29 17:18:11568검색

How Does the 'i' Flag Enable Case-Insensitive Attribute Matching in CSS?

CSS 속성 선택기에서 "i"의 의미 이해

현대 웹 개발에서 CSS 속성 선택기는 스타일 요소에서 중요한 역할을 합니다. 그들의 속성을 기반으로합니다. 그러한 속성 중 하나가 "i"인데, 이는 그 중요성에 대한 의문을 제기할 수 있습니다.

CSS 선택기 [type="checkbox" i] 해석

당신이 가지고 있는 스니펫 제공된 [type="checkbox" i]는 CSS 선택기 레벨 4에 새로 도입된 기능인 대소문자를 구분하지 않는 속성 일치를 예시합니다. 이 기능을 사용하면 대소문자 차이에 관계없이 속성 일치가 가능합니다.

가용성 및 지원

현재 이 기능은 주요 브라우저 버전에서 광범위하게 지원됩니다.

  • 크롬 49
  • 파이어폭스 47
  • Safari 9
  • Opera 37

그러나 버전 39부터 Chrome의 사용자 에이전트 스타일로 사용할 수 있었지만 웹 콘텐츠에서 사용하려면 실험적 기능을 활성화해야 했습니다. .

브라우저 예시 테스트

다양한 브라우저에서 이 기능의 지원을 테스트하려면 다음 HTML/CSS 스니펫을 활용할 수 있습니다.

<br>[data-test] {</p>
<pre class="brush:php;toolbar:false">width: 100px;
height: 100px;
margin: 4px;

}

[data-test="A"] {

background: red;

}

[data-test="a" i] {

background: green;

}


지원되는 브라우저에서 div 요소는 녹색으로 표시되어 대소문자를 구분하지 않는 일치가 성공했음을 나타냅니다. 그렇지 않으면 빨간색이 됩니다.

위 내용은 \'i\' 플래그는 CSS에서 대소문자를 구분하지 않는 속성 일치를 어떻게 활성화합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.