Maison >interface Web >tutoriel CSS >Comment puis-je styliser tous les éléments sauf le premier d'une série à l'aide du sélecteur `:not(:first-child)` de CSS ?

Comment puis-je styliser tous les éléments sauf le premier d'une série à l'aide du sélecteur `:not(:first-child)` de CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-02 12:55:13188parcourir

How Can I Style All but the First Element in a Series Using CSS's `:not(:first-child)` Selector?

Maîtriser le sélecteur not:first-child pour la maîtrise CSS

Question :

Comment cibler efficacement chaque élément sauf le premier d'une série d'éléments utilisant le sélecteur not:first-child de CSS ? Cette ségrégation pose un défi lorsqu'on tente de styliser des éléments spécifiques tout en excluant la première occurrence.

Réponse :

Pour réaliser cette ségrégation, il existe deux approches viables :

1. Utilisation du sélecteur :not (navigateurs modernes) :

Pour les navigateurs modernes prenant en charge les sélecteurs CSS niveau 3, le sélecteur suivant ciblera avec précision tous les éléments sauf le premier :

div ul:not(:first-child) {
    background-color: #900;
}

2. Révocation conditionnelle de la portée :

Pour les navigateurs existants ou des scénarios spécifiques où le sélecteur :not est limité, vous pouvez utiliser la technique suivante :

  1. Définissez initialement une règle qui s'applique à tous les éléments du type souhaité (par exemple, toutes les balises
      dans un
      ):
div ul {
    background-color: #900;
}
  1. Créez une règle pour révoquer ce style à partir du premier élément, en définissant les attributs CSS applicables à leurs valeurs par défaut :
div ul:first-child {
    background-color: transparent;
}

En révoquant le style sous condition, vous ciblez efficacement tous les éléments sauf le premier. Cette approche offre une compatibilité avec les navigateurs existants et permet un contrôle plus granulaire sur l'exclusion de style.

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