Comment puis-je sélectionner des éléments sans classes ou attributs spécifiques en CSS ?-tutoriel CSS-php.cn

Comment puis-je sélectionner des éléments sans classes ou attributs spécifiques en CSS ?

Patricia Arquette

Libérer： 2024-12-17 21:55:16

original

365 Les gens l'ont consulté

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

Négation des sélecteurs de classes et d'attributs en CSS

Besoin de sélectionner des éléments dépourvus de classes ou d'attributs spécifiques ? CSS propose une solution via la pseudo-classe :not().

:not() Pseudo-Class

La pseudo-classe :not() vous permet de annuler un sélecteur, en sélectionnant les éléments qui ne correspondent pas aux critères spécifiés. Généralement, les sélecteurs de classe sont utilisés comme suit :

:not(.printable) {
    /* Styles for non-printable elements */
}

Copier après la connexion

De même, les sélecteurs d'attributs peuvent être annulés :

:not([attribute]) {
    /* Styles for elements without the attribute */
}

Copier après la connexion

Exemple

Considérez le HTML suivant :

<html>

Copier après la connexion

Pour sélectionner tous les éléments qui n'ont pas le "printable" classe, utilisez la règle CSS suivante :

:not(.printable) {
    background-color: lightgray;
}

Copier après la connexion

Cela mettra en surbrillance les éléments nav et a en gris clair.

Support et alternatives du navigateur

IE8 et versions antérieures ne prennent pas en charge :not(). Comme alternative, vous pouvez créer des règles de style pour les éléments qui possèdent la classe « imprimable ». Si cela n'est pas réalisable, envisagez de restructurer votre balisage pour tenir compte des limitations.

Considérations

Les propriétés telles que display: none sur :not(.printable) supprimeront complètement le élément et ses descendants de layout. Pour éviter cela, utilisez plutôt la visibilité : cachée, qui permet aux descendants visibles de s'afficher pendant que les éléments masqués continuent d'affecter la mise en page.

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!