CSS에서 클래스 및 속성 선택기 부정
특정 클래스나 속성이 없는 요소를 선택해야 합니까? CSS는 :not() 의사 클래스를 통해 솔루션을 제공합니다.
:not() 의사 클래스
:not() 의사 클래스를 사용하면 다음을 수행할 수 있습니다. 선택기를 무효화하여 지정된 기준과 일치하지 않는 요소를 선택합니다. 일반적으로 클래스 선택자는 다음과 같이 사용됩니다.
:not(.printable) {
/* Styles for non-printable elements */
}마찬가지로 속성 선택자는 무효화될 수 있습니다.
:not([attribute]) {
/* Styles for elements without the attribute */
}예
다음을 고려하세요. 다음 HTML:
<html>
모든 요소를 선택하려면 "인쇄 가능" 클래스가 없으면 다음 CSS 규칙을 사용하십시오.
:not(.printable) {
background-color: lightgray;
}이렇게 하면 탐색 및 요소가 밝은 회색으로 강조 표시됩니다.
브라우저 지원 및 대안
IE8 이하에서는 :not()을 지원하지 않습니다. 대안으로 "인쇄 가능" 클래스가 있는 요소에 대한 스타일 규칙을 만들 수 있습니다. 이것이 가능하지 않은 경우 제한 사항을 수용하도록 마크업을 재구성하는 것이 좋습니다.
고려 사항
display: none on :not(.printable)과 같은 속성은 요소와 레이아웃의 하위 요소입니다. 이를 방지하려면 visible:hidden을 대신 사용하세요. 이렇게 하면 숨겨진 요소가 레이아웃에 계속 영향을 미치는 동안 보이는 하위 요소가 표시됩니다.
위 내용은 CSS에서 특정 클래스나 속성이 없는 요소를 어떻게 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
