Maison > interface Web > tutoriel CSS > Comment puis-je exclure le premier élément à l'aide des sélecteurs CSS ?

Comment puis-je exclure le premier élément à l'aide des sélecteurs CSS ?

Patricia Arquette
Libérer: 2024-12-01 00:53:10
original
328 Les gens l'ont consulté

How Can I Exclude the First Element Using CSS Selectors?

Exclusion du premier élément avec le sélecteur CSS :not:first-child

En CSS, le sélecteur :first-child cible le premier élément enfant de son élément parent. Pour exclure le premier élément, vous pouvez utiliser le sélecteur inverse :not:first-child.

Tentative 1 : Utiliser :not:first-child

div ul:not:first-child {
    background-color: #900;
}
Copier après la connexion

Tentative 2 : Utiliser :not(:first-child)

div ul:not(:first-child) {
    background-color: #900;
}
Copier après la connexion

Tentative 3 : Utilisation de :first-child:after

div ul:first-child:after {
    background-color: #900;
}
Copier après la connexion

Cependant, aucun de ces éléments méthodes ont obtenu le résultat souhaité.

Solution : Utilisation de la compatibilité du navigateur Correction

Le sélecteur :not n'accepte qu'un simple sélecteur comme argument. Par conséquent, pour prendre en charge les navigateurs existants qui ne prennent pas en charge la syntaxe :not(:first-child), vous pouvez utiliser une technique alternative :

  1. Définir une règle avec une portée plus large que prévu :
div ul {
    background-color: #900;
}
Copier après la connexion
  1. "Révoquer" la règle sous condition pour limiter sa portée aux exclus element:
div ul:first-child {
    background-color: transparent;
}
Copier après la connexion

Explication:

La première règle applique la couleur d'arrière-plan à tous les éléments ul. La deuxième règle utilise la valeur par défaut (transparent) pour background-color, supprimant ainsi la couleur d'arrière-plan du premier élément ul enfant.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal