CSS :not()은 요소 제외를 위한 여러 인수를 지원합니까?

:not() 의사 클래스에 대한 다중 인수 신화 폭로

CSS에서 :not() 의사 클래스는 다음을 허용합니다. 특정 기준에 따라 요소를 제외합니다. 그러나 여러 인수가 의사 클래스 내에서 함께 연결될 수 있다는 일반적인 오해가 있습니다. 이러한 오해는 유형을 기준으로 사용하여 여러 유형의 입력 요소를 제외하려고 할 때 발생합니다.

제공된 예를 고려하십시오.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

의도는 라디오를 제외한 모든 유형의 입력 요소를 선택하는 것입니다. 그리고 체크박스. 그러나 이 구문은 작동하지 않습니다.

해결책: 제외 기준 분석

이 문제를 해결하려면 :not() 내에서 여러 인수를 연결하는 대신, CSS는 간단한 솔루션을 제공합니다. 즉, 각 제외 기준에 대해 별도의 :not() 문을 사용하는 것입니다. 이 경우:

input:not([type="radio"])):not([type="checkbox"])

이 구문은 라디오나 체크박스가 아닌 입력 요소를 올바르게 선택합니다. :not() 의사 클래스는 배타적으로 작동하므로 여러 문을 사용하면 요소가 제외되도록 지정된 모든 기준이 충족됩니다.

기억하세요:

:not() 의사 클래스는 단일 문 내에 연결된 여러 인수를 지원하지 않습니다. 여러 유형의 요소를 제외하려면 각 제외 기준에 대해 별도의 :not() 문을 사용하세요. 제외 기준을 개별 문으로 분류하면 CSS에서 원하는 요소를 효과적으로 타겟팅할 수 있습니다.

위 내용은 CSS :not()은 요소 제외를 위한 여러 인수를 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!