Comment puis-je styliser tous les éléments sauf le premier enfant en utilisant CSS ?

Éléments de style sauf le premier : exploration du sélecteur CSS "not:first-child"

Dans le style CSS, le "not:first -child" le sélecteur vous permet de cibler tous les éléments sauf le premier dans une hiérarchie particulière. Bien que cela semble simple, appliquer ce sélecteur dans des scénarios spécifiques peut s'avérer difficile.

Application de CSS aux éléments autres que les premiers

Considérons un scénario dans lequel vous avez un "div "balise contenant plusieurs balises "ul". Pour définir les propriétés CSS pour chaque balise "ul" sauf la première, le code div ul:not(:first-child) devrait fonctionner. Cependant, en cas d'échec, voici quelques raisons :

• Prise en charge des navigateurs : Le sélecteur "not:first-child" est pris en charge dans les navigateurs modernes mais peut ne pas être compatible avec navigateurs existants.
• Syntaxe du sélecteur : Assurez-vous que la syntaxe du sélecteur est correcte, en utilisant deux points (:) avant le descripteur « premier enfant ».

Approche alternative

Si « non : premier enfant » n'est pas viable, une approche alternative consiste à appliquer d'abord le style à tous les éléments, puis "révoquer"-le pour le premier élément. Par exemple :

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

Dans cet exemple, la première règle s'applique à tous les éléments « ul », tandis que la deuxième règle remplace spécifiquement la couleur d'arrière-plan du premier élément.

Limiter la portée et les valeurs par défaut

Lorsque vous limitez la portée à l'aide de cette approche alternative, définissez l'attribut CSS révoqué sur sa valeur par défaut. Cela garantit que le style d'origine n'est remplacé que pour le premier élément.

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!