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
Libérer: 2024-12-02 12:55:13
original
186 Les gens l'ont consulté

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;
}
Copier après la connexion

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;
}
Copier après la connexion
  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;
}
Copier après la connexion

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!

source:php.cn
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