이 문서에서는 CSS 의사 클래스인 is 및 :not을 소개하고 is, not, match 및 any
:not
The :not() CSS 의사- 클래스는 선택자 목록과 일치하지 않는 요소를 나타내기 때문에 부정 의사 클래스라고 합니다.
위는 MDN의 not
추천 학습: CSS 동영상 튜토리얼
이름만 봐도 대략적인 내용을 알 수 있습니다. 비선택, 괄호 안의 다른 요소 제외
가장 간단한 예는 CSS를 사용하여 변경하지 않고 div를 넣는 것입니다. html을 전제로 P 태그를 제외한 다른 글꼴 색상은 파란색이 됩니다.
<div> <span>我是蓝色</span> <p>我是黑色</p> <h1>我是蓝色</h2> <h2>我是蓝色</h2> <h3>我是蓝色</h3> <h4>我是蓝色</h4> <h5>我是蓝色</h5> </div>
이전 접근 방식
div span,div h2,div h3, div h4,{ color: blue; }
not writing method
div:not(p){ color: blue; }
위의 예를 보면 not pseudo의 역할을 확실히 알 수 있습니다. -class selector
업그레이드하자, Q: div에서span과 p
div:not(p):not(span){ color: blue; }
div:not(p,span){ color: blue; }
<header> <ul> <li><p>鼠标放上去变蓝色</p></li> <li><p>鼠标放上去变蓝色</p></li> </ul> <p>正常字体</p> </header> <main> <ul> <li><p>鼠标放上去变蓝色</p></li> <li><p>鼠标放上去变蓝色</p></li> <p>正常字体</p> </ul> </main> <footer> <ul> <li><p>正常字体</p></li> <li><p>正常字体</p></li> </ul> </footer>
:is
:is() CSS 의사 클래스 함수는 선택기를 사용합니다. 목록을 인수로 사용하고 해당 목록의 선택기 중 하나에 의해 선택될 수 있는 요소를 선택합니다. 이는 보다 간결한 형식으로 큰 선택기를 작성하는 데 유용합니다.위는 MDN의 설명입니다말하기 전에, 경기를 이해해야 합니다일치와 is의 관계는 무엇인가요? matches는 is의 전생이지만 본질적으로 같은 것이고 사용법도 똑같습니다. match라는 단어의 의미는 그 기능과 매우 일치하지만 not의 반대 효과를 갖습니다. not의 반대로, match가 이번에는 정말 좋아 보입니다. 위치가 맞지 않고 단어도 간결하지 않아서 이름이 바뀌었습니다. https://github.com/w3c/csswg-drafts/ 이름 변경의 원인인 Issue/3258자, 이제 우리는 일치와 is가 실제로 같은 것임을 알았습니다. 그렇다면 is는 어떻게 사용됩니까? 예: 헤더 아래의 p 태그를 만들고 마우스를 올리면 메인이 파란색으로 변합니다.
header ul p:hover,main ul p:hover{ color: blue; }
:is(header, main) ul p:hover{ color: blue; }
/* Level 0 */ h1 { font-size: 30px; } /* Level 1 */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* Level 2 */ section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-size: 20px; }
/* Level 0 */ h1 { font-size: 30px; } /* Level 1 */ :is(section, article, aside, nav) h1 { font-size: 25px; } /* Level 2 */ :is(section, article, aside, nav) :is(section, article, aside, nav) h1 { font-size: 20px; }
:-moz-any(.b, .c) { } :-webkit-any(.b, .c) { }
any와 is의 관계는 무엇인가요?
예, is는 any의 대체품이기도 합니다. 이는 브라우저 접두사, 선택 성능 등과 같은 any의 일부 단점을 해결합니다. any는 is와 정확히 동일한 기능을 가지고 있지만 유일한 차이점은 필요하다는 것입니다. 브라우저 접두사를 추가하려면 사용법은 다음과 같습니다rrreee
결론위의 소개를 통해 CSS 의사 클래스 간의 관계는 is, not, match 및 any 대략적으로 설명됩니다is+not 조합이 일반적인 경향입니다이 기사는 PHP 중국어 웹사이트인
CSS Tutorial 칼럼에서 가져온 것입니다. 학습을 환영합니다
위 내용은 5분 안에 CSS 의사 클래스 선택기를 이해하세요: is :not의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!