집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 특정 클래스나 속성이 없는 요소를 어떻게 선택할 수 있습니까?

CSS에서 특정 클래스나 속성이 없는 요소를 어떻게 선택할 수 있습니까?

How Can I Select Elements Without Specific Classes or Attributes in CSS?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：