Maison >interface Web >tutoriel CSS >CSS peut-il sélectionner des éléments sans classe ou attribut spécifique ?
CSS peut-il sélectionner des éléments sans classe ou attribut spécifique ?
- Susan Sarandonoriginal
- 2025-01-03 22:04:43908parcourir
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>
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 */
}
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!