5분 안에 CSS 의사 클래스 선택기를 이해하세요: is :not

이 문서에서는 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 id="我是蓝色">我是蓝色</h2>
    <h3 id="我是蓝色">我是蓝色</h3>
    <h4 id="我是蓝色">我是蓝色</h4>
    <h5 id="我是蓝色">我是蓝色</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>

Compatible

IE8을 제외하고 현재 모든 주요 브라우저에서 지원되므로 안심하고 사용할 수 있습니다

: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;
}

is 쓰기 방법

/* 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;
}

위의 예에서 is의 왼쪽과 오른쪽을 볼 수 있지만 거기에는 is no is의 힘을 충분히 반영하지만, 더 많은 콘텐츠, 특히 더 많은 레벨의 콘텐츠를 선택하면 is의 작성 방법이 얼마나 간결한지 알게 될 것입니다. 이전 작성 방법을 보려면 MDN의 예를 들어보세요

/* 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;
}

How to write is

:-moz-any(.b, .c) {
}
:-webkit-any(.b, .c) { 
}

nest 수준이 높아질수록 is의 장점이 점점 더 뚜렷해지는 것을 볼 수 있습니다

is에 대해 이야기한 후에는 앞서 언급한 것처럼 is가 match의 대체라는 것을 알아야 합니다. ,

any와 is의 관계는 무엇인가요?

예, is는 any의 대체품이기도 합니다. 이는 브라우저 접두사, 선택 성능 등과 같은 any의 일부 단점을 해결합니다.

any는 is와 정확히 동일한 기능을 가지고 있지만 유일한 차이점은 필요하다는 것입니다. 브라우저 접두사를 추가하려면 사용법은 다음과 같습니다

rrreee

결론

위의 소개를 통해 CSS 의사 클래스 간의 관계는 is, not, match 및 any 대략적으로 설명됩니다

is+not 조합이 일반적인 경향입니다

이 기사는 PHP 중국어 웹사이트인

CSS Tutorial 칼럼에서 가져온 것입니다. 학습을 환영합니다

위 내용은 5분 안에 CSS 의사 클래스 선택기를 이해하세요: is :not의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!