CSS 부정 의사 클래스란 무엇입니까?

CSS 부정 의사 클래스는 ":not(selector)"입니다. ":not" 부정 의사 클래스는 전달된 매개변수 선택기에 의해 선택되지 않은 요소와 직접 일치합니다. 전달된 매개변수에는 추가된 선택기 또는 의사 요소가 포함되지 않을 수 있습니다. 선택자.

권장: "css 비디오 튜토리얼"

: not(selector)는 CSS의 부정 의사 클래스(selector)이며 간단한 선택기를 매개변수로 허용합니다. 기본적으로 다른 선택기를 매개변수로 사용할 수 있습니다.

:not(selector)는 전달된 매개변수 선택기에 의해 선택되지 않은 요소와 일치합니다. 전달된 매개변수에는 추가 선택기나 의사 요소 선택기가 포함될 수 없습니다.

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

이 예에는 "다른" 클래스가 있는 li 요소가 있습니다.

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

CSS는 "다른" 클래스를 제외한 모든 li 요소를 선택합니다.

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

모든 단순 선택자(요소 유형 선택자, 범용 선택자, 속성 선택자, 클래스 선택자, ID 선택자, 의사 클래스 선택자 포함)에 의사 클래스 선택자를 적용하여 동일한 효과를 낼 수 있습니다.

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

하지만 의사 요소 선택기를 매개변수로 사용하면 기대했던 효과가 나오지 않습니다.

:not(::first-line) { 
/* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

:not()의 여러 사용법을 시각적으로 표현

:not() 의사 클래스의 우선순위는 해당 매개변수의 우선순위입니다. :not() 의사 클래스는 다른 의사 클래스 선택기와 마찬가지로 선택기의 우선순위를 높이지 않습니다.

부정 의사 클래스 선택자는 중첩을 지원하지 않으므로 :not(:not(...))은 절대 허용되지 않습니다. 개발자는 의사 요소가 단순한 선택자가 아니므로 :not() 의사 클래스에 대한 인수로 유효하지 않다는 점에 유의해야 합니다. 또한 일부 속성 선택자는 보편적으로 지원되지 않으므로 속성 선택자를 사용할 때는 주의해야 합니다. :not() 선택기와 다른 :not() 선택기를 연결하는 것도 금지됩니다.

위 내용은 CSS 부정 의사 클래스란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!