내 CSS `:not()` 선택기가 실패하는 이유는 무엇이며 어떻게 해결할 수 있나요?

CSS에서 :not() 선택기가 실패하는 이유

jQuery의 :not() 선택기는 CSS3 준수를 주장하지만 표준과 크게 다릅니다. CSS의 :not() 선택기.

jQuery 확장

표준 :not()은 단일 단순 선택기만 인수로 허용하는 반면, jQuery는 쉼표로 구분된 선택기 목록을 포함하여 임의의 선택기를 허용합니다.

CSS 제한

반면, 표준 :not()은 엄격합니다. 제한 사항:

• 쉼표로 구분된 선택자를 전달할 수 없습니다
• 단순 선택자를 복합 선택자로 결합할 수 없습니다
• 결합자(예: 공백)를 사용할 수 없습니다

원인 실패

주어진 시나리오에서 CSS 수정은 jQuery의 :not() 동작을 복제하려고 시도했는데, 이는 다음과 같은 이유로 유효한 CSS가 아닙니다.

• 나누기 쉼표(예: :not(.alpha, .beta, .gamma))는 허용되지 않습니다.
• 복합 전달 선택기(예: body > div)는 :not() 내에서 유효하지 않습니다.

순수한 CSS 해결 방법

순수한 CSS에서 원하는 결과를 얻으려면, 여러 개의 :not() 선택기를 연결해야 합니다:

#sectors > div:not(.alpha):not(.beta):not(.gamma)

그러나 이 접근 방식은 더 좋습니다. jQuery의 확장된 :not() 구문보다 오류가 발생하기 쉽고 일관성이 없습니다.

향후 개발

선택기 4는 :not()을 향상하여 쉼표로 구분된 복잡한 목록을 허용합니다. 선택기를 사용하면 jQuery와 정렬되어 향후 더욱 다양한 용도로 사용할 수 있습니다.

위 내용은 내 CSS `:not()` 선택기가 실패하는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!