Kann CSS Elemente ohne eine bestimmte Klasse oder ein bestimmtes Attribut auswählen?-CSS-Tutorial-php.cn

Kann CSS Elemente ohne eine bestimmte Klasse oder ein bestimmtes Attribut auswählen?

Susan Sarandon

Freigeben： 2025-01-03 22:04:43

Original

931 Leute haben es durchsucht

Can CSS Select Elements Without a Specific Class or Attribute?

Kann man CSS schreiben, um Elemente auszuwählen, denen eine Klasse oder ein Attribut fehlt?

Dieses Problem tritt auf, wenn man Elemente auswählen möchte, die keine Klasse oder kein Attribut besitzen eine bestimmte Klasse oder ein bestimmtes Attribut. Betrachten Sie zum Beispiel den folgenden HTML-Code:

<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>

Nach dem Login kopieren

In diesem Fall möchten wir die Elemente ohne die „druckbare“ Klasse auswählen, nämlich nav und a Elemente.

Lösung:

Traditionell kann man dies erreichen mit der :not()-Pseudoklasse, die auf einen Klassenselektor angewendet wird:

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

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

Nach dem Login kopieren

Für eine verbesserte Browserkompatibilität (IE8 und niedriger unterstützen :not() nicht) wird jedoch empfohlen, Elemente zu formatieren, die besitzen die Klasse „druckbar“. Wenn dies unpraktisch ist, kann eine Änderung des Markups erforderlich sein.

Überlegungen:

Eigenschaften, die in dieser Regel festgelegt werden, können sich auf Nachkommen mit der Klasse „druckbar“ auswirken. Wenn Sie beispielsweise display: none auf :not(.printable) setzen, werden sowohl es als auch seine Nachkommen ausgeblendet. Erwägen Sie stattdessen die Verwendung von „visibility:hidden“, um die Anzeige von Nachkommen unter Beibehaltung des ursprünglichen Layouts zu ermöglichen. Daher ist Vorsicht geboten.

Das obige ist der detaillierte Inhalt vonKann CSS Elemente ohne eine bestimmte Klasse oder ein bestimmtes Attribut auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!