Comment puis-je sélectionner des éléments sans classes ou attributs spécifiques en 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 */
}

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

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

Exemple

Considérez le HTML suivant :

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

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!