:not()이란 무엇인가요? :not()의 간단한 사용

이 기사에서는 다음을 소개합니다. not()은 무엇인가요? :not()을 간단히 사용하면 누구나 :not()이 어떻게 사용되는지 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

:not()은 CSS의 부정 의사 클래스 선택자입니다. 이는 간단한 선택기(아래 표시)를 인수로 사용하고 인수로 표시되지 않는 하나 이상의 요소를 일치시키는 기능적 의사 선택기입니다.

:not() 매개변수로 사용할 수 있는 것은 다음과 같은 간단한 선택자일 수 있습니다:

1. 태그 선택자(예: p,span 등)

2. 클래스 선택(예: .element, . 사이드바 등)

3. ID 선택자(예: #header)

4. 유사 클래스 선택자(예: first-child, :last-of-type)

5. type="checkbox"] )

6. 범용 선택기(*)

그러나 :not()에 전달된 매개변수는 의사 요소 선택기(예: ::before 및 ::after 등)일 수 없습니다. 또 다른 부정적인 의사 클래스 선택자.

따라서 다음은 유효하지 않은 :not() 값입니다:

/* 无效 */
p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}

위의 예에서 볼 수 있듯이 :not()은 중첩될 수 없습니다(예: not(:not(..))). :matches() 의사 클래스에 중첩될 수 없습니다(예: selector(:matches(:not(..)))).

앞서 언급했듯이 :not() 선택기는 선택기로 표시되지 않는 인수의 요소와 일치합니다. 따라서 이 CSS 문: :

li:not(.new) {    
  /* 所有样式列表项，除了具有新类的项之外*/
}

은 .new 클래스 이름을 가진 목록 항목을 제외한 모든 목록 항목을 선택합니다.

:not() 선택은 더 많은 :not() 선택과 연결될 수 있습니다. 예를 들어, 다음은 ID를 제외한 기사의 모든 #featureds와 일치하고 클래스 이름이 있는 기사를 필터링합니다.tutorial:

article:not(#featured):not(.tutorial) {    
     /* 格式化文章 */
}

:not()는 다른 의사 클래스 및 의사 요소와도 연결될 수 있습니다. 예를 들어, 다음은 클래스 이름 없이 항목을 나열하기 위해 "new!"라는 단어를 추가하기 위해 ::after 의사 요소를 사용합니다.

li ：not（.old）:: after {     
   content：“New！” ;    
   color：deepPink;
}

설명:

:not() 의사 클래스 선택을 사용하면 쓸모 없는 선택 항목을 작성할 수 있습니다. . 예를 들어, not(*)은 어떤 요소에도 스타일이 적용되지 않는다는 의미는 아닙니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 :not()이란 무엇인가요? :not()의 간단한 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!