CSS peut-il sélectionner des éléments sans classe ou attribut spécifique ?-tutoriel CSS-php.cn

CSS peut-il sélectionner des éléments sans classe ou attribut spécifique ?

Susan Sarandon

Libérer： 2025-01-03 22:04:43

original

933 Les gens l'ont consulté

Can CSS Select Elements Without a Specific Class or Attribute?

Peut-on écrire du CSS pour sélectionner des éléments dépourvus de classe ou d'attribut ?

Ce problème se pose lorsque l'on souhaite sélectionner des éléments qui ne possèdent pas une classe ou un attribut spécifique. Par exemple, considérons le HTML ci-dessous :

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

Copier après la connexion

Dans ce cas, nous visons à sélectionner les éléments sans la classe "printable", à savoir le nav et le a éléments.

Solution :

Traditionnellement, on peut y parvenir avec la pseudo-classe :not() appliquée à un sélecteur de classe :

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

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

Copier après la connexion

Cependant, pour une compatibilité améliorée avec les navigateurs (IE8 et versions antérieures ne prennent pas en charge :not()), il est recommandé de styliser les éléments qui do possède la classe "imprimable". Si cela n'est pas pratique, une modification du balisage peut être nécessaire.

Considérations :

Les propriétés définies dans cette règle peuvent affecter les descendants avec la classe "imprimable". Par exemple, définir display: none sur :not(.printable) le masquera ainsi que ses descendants. Pensez plutôt à utiliser visibilité: masqué pour permettre aux descendants de s'afficher tout en conservant la mise en page d'origine. La prudence est donc de mise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!