CSS가 특정 클래스나 속성 없이 요소를 선택할 수 있나요?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS가 특정 클래스나 속성 없이 요소를 선택할 수 있나요?

Susan Sarandon

Jan 03, 2025 pm 10:04 PM

Can CSS Select Elements Without a Specific Class or Attribute?

클래스나 속성이 없는 요소를 선택하기 위해 CSS를 작성할 수 있나요?

이 문제는 클래스나 속성이 없는 요소를 선택하려고 할 때 발생합니다. 특정 클래스나 속성. 예를 들어 아래 HTML을 고려해 보세요.

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

로그인 후 복사

이 경우 "인쇄 가능" 클래스가 없는 요소, 즉 nav 및 a elements.

해결책:

전통적으로 클래스 선택기에 적용되는 :not() 의사 클래스를 사용하여 이를 달성할 수 있습니다.

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

로그인 후 복사

그러나 향상된 브라우저 호환성(IE8 이하에서는 :not() 지원이 부족함)을 위해 다음과 같은 스타일 요소를 사용하는 것이 좋습니다.

do "인쇄 가능" 클래스를 소유하세요. 이것이 비현실적이라면 마크업을 수정해야 할 수도 있습니다.

고려 사항:

이 규칙 내에 설정된 속성은 "인쇄 가능" 클래스가 있는 하위 항목에 영향을 미칠 수 있습니다. 예를 들어 :not(.printable)에 display: none을 설정하면 해당 항목과 해당 하위 항목이 모두 숨겨집니다. 대신 원래 레이아웃을 유지하면서 하위 항목을 표시할 수 있도록 visible:hidden 사용을 고려하세요. 그러므로 주의하시기 바랍니다.

위 내용은 CSS가 특정 클래스나 속성 없이 요소를 선택할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.